jquery - Moving an Image from one <div> to another <div> with CSS as part of a Javascript function -

I'm a novice coder and I'm developing a simple card game as my first real project. I need help moving an img from one to another as part of a function that checks the score (if the score is over '99' it then runs the checkscore(); function. As part of this function, it appends the image from the 'trinkets-held' div, to the 'trinkets-lost' div. My problem is that I'm new to CSS animations and I'm trying to animate the move. Is my setup conducive to this or am I trying to tackle this all wrong?

Here is the html:

<body>
  <div id="trinkets-held-text">
    Trinkets Held
  </div>
  <div id="trinkets-held" style="text-align: center">
    <img alt="trinket1" id="trinket1" src="graphics/trinket1.png" style="width:100px;height:100px">
    <img alt="trinket2" id="trinket2" src="graphics/trinket2.png" style="width:100px;height:100px">
    <img alt="trinket3" id="trinket3" src="graphics/trinket3.png" style="width:100px;height:100px">
  </div>

  <br>

  <div id="trinkets-lost-text">
    Trinkets Lost
  </div>
  <div id="trinkets-lost" style="text-align: center"></div>
</body>

And here is the javascript functions needed to move the image:

function checkscore() {
    if (confirm("GAME OVER") === true) {
      document.getElementById('trinkets-lost').appendChild(document.getElementById('trinket1'));
      roundreset();
    }
    else {
      reset();
    }
}

How would I animate that move?

Here is the html:

<body>
  <div id="trinkets-held-text">
    Trinkets Held
  </div>
  <div id="trinkets-held" style="text-align: center">
    <img alt="trinket1" id="trinket1" src="graphics/trinket1.png" style="width:100px;height:100px">
    <img alt="trinket2" id="trinket2" src="graphics/trinket2.png" style="width:100px;height:100px">
    <img alt="trinket3" id="trinket3" src="graphics/trinket3.png" style="width:100px;height:100px">
  </div>

  <br>

  <div id="trinkets-lost-text">
    Trinkets Lost
  </div>
  <div id="trinkets-lost" style="text-align: center"></div>
</body>

And here is the javascript functions needed to move the image:

function checkscore() {
    if (confirm("GAME OVER") === true) {
      document.getElementById('trinkets-lost').appendChild(document.getElementById('trinket1'));
      roundreset();
    }
    else {
      reset();
    }
}

How would I animate that move?

Share Improve this question asked Sep 17, 2014 at 16:33 xRoisinDubh 611 silver badge4 bronze badges

Css animations/transitions will give effect to style properties that you change. But changing the DOM element's structure will be aplied instantly, and it will not be suitable to animations... You will have to think this through. – LcSalazar Commented Sep 17, 2014 at 16:39
Are you actually using jQuery? – user3562712 Commented Sep 17, 2014 at 16:39

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

Okay, here is another approach. It is a bit more plex, but it uses CSS3 transitions, a clone and a placeholder for centered positions and correct animations. Also, the original element is moved in the DOM, so your DOM actually represents the game's data model and the trinket is not only moved in an optical way.

You can test it in this fiddle.

HTML:

<div id="trinkets-held-text">
  Trinkets Held
</div>
<div id="trinkets-held" style="text-align: center">
  <img alt="trinket1" id="trinket1" src="http://upload.wikimedia/wikipedia/mons/thumb/1/13/Disc_Plain_red.svg/100px-Disc_Plain_red.svg.png" class="trinket">
  <img alt="trinket2" id="trinket2" src="http://upload.wikimedia/wikipedia/mons/thumb/0/07/Disc_Plain_green_dark.svg/100px-Disc_Plain_green_dark.svg.png" class="trinket">
  <img alt="trinket3" id="trinket3" src="http://upload.wikimedia/wikipedia/mons/thumb/0/02/Disc_Plain_blue.svg/100px-Disc_Plain_blue.svg.png" class="trinket">
</div>

<br>

<div id="trinkets-lost-text">
  Trinkets Lost
</div>
<div id="trinkets-lost" style="text-align: center"></div>

<input type="button" onclick="checkscore(1)" value="Check Score (red)">
<input type="button" onclick="checkscore(2)" value="Check Score (green)">
<input type="button" onclick="checkscore(3)" value="Check Score (blue)">

CSS:

.trinket, .trinket-placeholder {
    width: 100px;
    height: 100px;

    /* the animation */
    transition: all 1.5s;

    /* we need relative positions for the position transitions */
    position: relative;
}

.trinket-placeholder {
    display: inline-block;
    /* the negative margin adjusts the original trinket */
    margin-left: -100px;
    /* only keep transitions for the width, so we can remove the margin without transitions */
    transition: width 1.5s;
}

.trinket {
    top: 0;
    left: 0;
}

#trinkets-lost {
    /* add a height to the wrapper, so there is no flickering after moving the element */
    min-height: 110px
}

JS:

function checkscore(i) {
    if (confirm("GAME OVER") === true) {
        moveTrinket(i);
    } else {
        reset();
    }
}

function moveTrinket(i) {
    var trinketsLost = document.getElementById('trinkets-lost');
    var trinketsHeld = document.getElementById('trinkets-held');
    var trinketOrig = document.getElementById('trinket' + i);

    // clone the element (wee need the clone for positioning)
    var trinketClone = trinketOrig.cloneNode();
    trinketClone.style.visibility = 'hidden';
    trinketsLost.appendChild(trinketClone);

    // calculate the new position, relative to the current position
    var trinketOrigTop = trinketOrig.getBoundingClientRect().top;
    var trinketOrigLeft = trinketOrig.getBoundingClientRect().left;
    var trinketCloneTop = trinketClone.getBoundingClientRect().top;
    var trinketCloneLeft = trinketClone.getBoundingClientRect().left;
    var newPositionTop = (trinketCloneTop - trinketOrigTop);
    var newPositionLeft = (trinketCloneLeft - trinketOrigLeft);

    // remove the clone (we do not need it anymore)
    trinketClone.parentNode.removeChild(trinketClone);

    // create a placeholder to prevent other elements from changing their position
    var placeholder = document.createElement('div');
    placeholder.classList.add('trinket-placeholder');
    trinketOrig.parentNode.insertBefore(placeholder, trinketOrig.nextSibling);

    // position the original at the clone's position (this triggers the transition)
    trinketOrig.style.zIndex = 1000;
    trinketOrig.style.top = newPositionTop + 'px';
    trinketOrig.style.left = newPositionLeft + 'px';

    // this will be triggered after the transition finished
    trinketOrig.addEventListener('transitionend', function() {
        // reset the positioning
        this.style.position = 'scroll';
        this.style.top = 0;
        this.style.left = 0;

        // shrink the placeholder to re-center the held trinkets
        placeholder.style.width = 0;
        placeholder.style.marginLeft = 0;

        // when the placeholder transition has finished, remove the placeholder
        placeholder.addEventListener('transitionend', function (){
            this.parentnode.removeChild(this);

            // removing the placeholder is the last action,
            // after that you can do any following actions
            roundreset();
        });

        // move the trinket element in the DOM (from held to lost)
        trinketsLost.appendChild(this);
    });
}

You could just run the animation that you want with a callback function that swaps the img src.

This example uses slideToggle to remove the image, swaps the src, and uses slideToggle again to make the image visible again:

HTML:

<img class="kittens" id="kittens-1" src="http://cdn.superbwallpapers./wallpapers/animals/kitten-16219-1280x800.jpg"></img>
<img class="kittens" id="kittens-2" src="http://critterbabies./wp-content/gallery/kittens/happy-kitten-kittens-5890512-1600-1200.jpg"></img><br/>
<input type="button" class="move" value="Move image" />

CSS:

.kittens {
    width: 300px;
    height: 300px;
}

Javascript:

$(function() {
    $('.move').click(function() {
        var img1 = $('#kittens-1').attr('src'),
            img2 = $('#kittens-2').attr('src');
        $('.kittens').slideToggle('slow', function() {
            $('#kittens-1').attr('src', img2);
            $('#kittens-2').attr('src', img1);
        }).slideToggle('slow');        
    });
});

Here is a fiddle

If you are limited to pure JavaScript, try this:

HTML:

<body>
    <div id="trinkets-held-text">
        Trinkets Held
    </div>
    <div id="trinkets-held" style="text-align: center">
        <div style="width:100px;height:100px; display: inline-block;">
            <img alt="trinket1" id="trinket1" src="graphics/trinket1.png" style="width:100px;height:100px">
        </div>
        <div style="width:100px;height:100px; display:inline-block;">
            <img alt="trinket2" id="trinket2" src="graphics/trinket2.png" style="width:100px;height:100px">
        </div>
        <div style="width:100px;height:100px; display:inline-block;">
            <img alt="trinket3" id="trinket3" src="graphics/trinket3.png" style="width:100px;height:100px">
        </div>


    </div>

    <br>

    <div id="trinkets-lost-text">
        Trinkets Lost
    </div>
    <div id="trinkets-lost" style="text-align: center"></div>



    <button onclick="checkscore('trinket1')">MOVE THE IMAGE</button>
    <button onclick="checkscore('trinket2')">MOVE THE IMAGE</button>
    <button onclick="checkscore('trinket3')">MOVE THE IMAGE</button>

</body>

JS:

<script>
        function checkscore(id) {
            var elem = document.getElementById(id);
            var style = "margin-top";
            var unit = "px";
            var from = 0;
            var to = 200;
            var time = 1000;

            elem.style['position'] = "absolute";
            elem.style['margin-left'] = "-50px";
            var start = new Date().getTime(),
                    timer = setInterval(function() {
                        var step = Math.min(1, (new Date().getTime() - start) / time);
                        var thestyle = (from + step * (to - from)) + unit;
                        elem.style[style] = thestyle;
                        if (step == 1)
                            clearInterval(timer);
                    }, 25);
            elem.style[style] = from + unit;
        }
    </script>

Heres a FIDDLE

Heres another approach with JQUERY and CSS

<!DOCTYPE html>

<html>
    <head>
        <title>Test</title>
        <script src="//ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <style>
            #trinkets-held, #trinkets-lost {
                height: 100px;
            }
            #trinkets-held img, #trinkets-lost img{
                width:100px;
                height:100px;
            }
            #trinkets-held img.move{
                -webkit-transition: 2s;
                -moz-transition: 2s;
                -ms-transition: 2s;
                -o-transition: 2s;
                transition: 2s;
                margin-top: 135px !important;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div id="trinkets-held-text">Trinkets Held</div>
        <div id="trinkets-held">
            <img alt="trinket1" id="trinket1" src="graphics/trinket1.png">
            <img alt="trinket2" id="trinket2" src="graphics/trinket2.png">
            <img alt="trinket3" id="trinket3" src="graphics/trinket3.png">
        </div>

        <br>

        <div id="trinkets-lost-text">Trinkets Lost</div>
        <div id="trinkets-lost">

        </div>



        <button id="doTheMove1" class="move_btns" value="trinket1">Score of Trinket1</button>
        <button id="doTheMove2" class="move_btns" value="trinket2">Score of Trinket2</button>
        <button id="doTheMove3" class="move_btns" value="trinket3">Score of Trinket3</button>


        <script>
            $(document).ready(function() {
                var score = 100;
                function checkscore(img_id) {
                    if (score > 99) {
                        $("#" + img_id).addClass("move"); //will slide it down

                        setTimeout(function() {//will wait for SECONDS then run function
                            $("#" + img_id).appendTo("#trinkets-lost");
                        }, 2000);//SECONDS
                    }
                }

                $(".move_btns").click(function() {
                    var img_id = $(this).val();
                    checkscore(img_id);
                });
            });
        </script>
    </body>

</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Moving an Image from one <div> to another <div> with CSS as part of a Javascript function -

4 Answers 4

与本文相关的文章

评论列表(0)