江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. questions

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

admin••questions•阅读0

I'm a novice coder and I'm developing a simple card game as my first real project. I need hel

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?

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?

  • javascript
  • jquery
  • html
  • css
Share Improve this question asked Sep 17, 2014 at 16:33 xRoisinDubhxRoisinDubh 611 silver badge4 bronze badges 2
  • 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

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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745290996a4620857.html

adminadmin
0

相关推荐

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信