jquery - 在 jQuery 中从左到右移动元素

Question

我正在使用它在幻灯片放映中移动一个 div。问题是每个图像的标题必须从同一位置(每个 div)开始在每个图像上从左向右移动。 使用这段代码，div 按需要移动，但下一个将从上一个放置的位置移动。

$("#elementId").animate({
        marginLeft: "-=100"
    }, 1000, function() {
        //Complete
    }
);

以防万一我难以解释。

我有一个幻灯片放映，每张图片淡入，一秒钟后，每张图片顶部出现一个带有一些文本的 div，div 必须从左向右移动。但是使用上面的代码，div 会移动，但是一旦下一个图像在 div 中淡出，就会从上一个 div 所在的最后位置开始移动。

如何使 div 从 0 或原始位置开始再次“移动”？

编辑 请求的代码:

    <script type="text/javascript">
    // Speed of the automatic slideshow
    var slideshowSpeed = 6000;

    // Variable to store the images we need to set as background
    // which also includes some text and url's.


    var photos = [ {
            "title" : "First Tag line :",
            "image" : "/images/chrysanthemum-266x200.jpg",
            "url" : "http://www.gyms-ireland.com",
            "firstline" : "First Tag line :",
            "secondline" : "Second Tag line"
        }, {
            "title" : "Some text",
            "image" : "/images/tulips-oop-ll-266x200.jpg",
            "url" : "http://www.gyms-ireland.com",
            "firstline" : "Some text",
            "secondline" : "Alternative text"
        }, {
            "title" : "Npthing Here",
            "image" : "/images/koala-266x200.jpg",
            "url" : "http://www.gyms-ireland.com",
            "firstline" : "Npthing Here",
            "secondline" : "Also nothing here",
        }, {
            "title" : "Office Appartments",
            "image" : "/images/work.jpg",
            "url" : "http://www.sxc.hu/photo/1265695",
            "firstline" : "Or still busy at",
            "secondline" : "work?"
        }
    ];

    jQuery(document).ready(function() {

        // Backwards navigation
        jQuery("#back").click(function() {
            stopAnimation();
            navigate("back");
        });

        // Forward navigation
        jQuery("#next").click(function() {
            stopAnimation();
            navigate("next");
        });

        var interval;
        jQuery("#control").toggle(function(){
            stopAnimation();
        }, function() {
            // Change the background image to "pause"
            jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" });

            // Show the next image
            navigate("next");

            // Start playing the animation
            interval = setInterval(function() {
                navigate("next");
            }, slideshowSpeed);
        });


        var activeContainer = 1;    
        var currentImg = 0;
        var animating = false;
        var navigate = function(direction) {
            // Check if no animation is running. If it is, prevent the action
            if(animating) {
                return;
            }

            // Check which current image we need to show
            if(direction == "next") {
                currentImg++;
                if(currentImg == photos.length + 1) {
                    currentImg = 1;
                }
            } else {
                currentImg--;
                if(currentImg == 0) {
                    currentImg = photos.length;
                }
            }

            // Check which container we need to use
            var currentContainer = activeContainer;
            if(activeContainer == 1) {
                activeContainer = 2;
            } else {
                activeContainer = 1;
            }

            showImage(photos[currentImg - 1], currentContainer, activeContainer);

        };

        var currentZindex = -1;
        var showImage = function(photoObject, currentContainer, activeContainer) {
            animating = true;

            // Make sure the new container is always on the background
            currentZindex--;

            // Set the background image of the new active container
            jQuery("#headerimg" + activeContainer).css({
                "background-image" : "url(" + photoObject.image + ")",
                "display" : "block",
                "z-index" : currentZindex
            });

            // Hide the header text
            jQuery("#headertxt").css({"display" : "none"});

            // Set the new header text
            jQuery("#firstline").html(photoObject.firstline);
jQuery("#firstline").css("marginLeft", "0").animate({
        marginLeft: "-=100"
    }, 4000, function() {
        //Complete
    }
);
            jQuery("#secondline")
                .attr("href", photoObject.url)
                .html(photoObject.secondline);
            jQuery("#pictureduri")
                .attr("href", photoObject.url)
                .html(photoObject.title);


            // Fade out the current container
            // and display the header text when animation is complete
            jQuery("#headerimg" + currentContainer).fadeOut(function() {
                setTimeout(function() {
                    jQuery("#headertxt").css({"display" : "block"});
                    animating = false;
                }, 500);
            });
        };

        var stopAnimation = function() {
            // Change the background image to "play"
            jQuery("#control").css({ "background-image" : "url(images/btn_play.png)" });

            // Clear the interval
            clearInterval(interval);
        };

        // We should statically set the first image
        navigate("next");

        // Start playing the animation
        interval = setInterval(function() {
            navigate("next");
        }, slideshowSpeed);

    });</script>

HTML

<div id="headerimgs">
    <div id="headerimg1" class="headerimg"></div>
    <div id="headerimg2" class="headerimg"></div>
</div>

<!-- Slideshow controls -->

<!-- jQuery handles for the text displayed on top of the images -->
<div id="headertxt">
    <p class="caption">
        <span id="firstline"></span>
        <a href="#" id="secondline"></a>
    </p>
    <p class="pictured">
        Pictured:
        <a href="#" id="pictureduri"></a>
    </p>
</div>

CSS

#header {
    height: 220px;
    width: 520px;
}
.headerimg {
    background-position: center top;
    background-repeat: no-repeat;
    height: 220px;
    position: absolute;
    width: 520px;
}

#headertxt {
    clear: both;
    margin: 0 auto;
    position: relative;
    top: 50px;
    width: 520px;
}
#firstline {
    color: #333333;
    display: block;
    float: left;
    font-size: 25px;
    margin: 10px 10px 0 0;
    padding: 10px;
    marginLeft:0px !important;
}
#secondline {
    clear: both;
    color: #CD2B3A;
    display: block;
    float: left;
    font-size: 40px;
    margin: 10px 30px 0;
    padding: 15px 10px;
    text-decoration: none;
}
#headerimgs a {
    text-indent: -999999px;
}

.new {
    display: block;
    height: 220px;
    position: absolute;
    width: 520px;
}
#secondline:hover { text-decoration:underline; color:#7F000C; }

.pictured {
    background-color: #CC3333;
    clear: both;
    color: #FFFFFF;
    display: block;
    float: right;
    font-size: 12px;
    margin-top: 10px;
    padding: 9px 16px;
}

Answer 1

很难从问题中分辨出来，但如果您重新使用相同的 div，则需要重置 marginLeft。例如:

$("#elementId").css("marginLeft", "0").animate({
        marginLeft: "-=100"
    }, 1000, function() {
        //Complete
    }
);

(当然，如果起点不应该是 0，请使用 10px 或其他。)您可能还想抛出一个 stop 在那里，以防你在动画完成之前调用它，但这取决于你的代码的其余部分在做什么。

Live example | source :

HTML:

<div id="elementId">I'm the div</div>
<button id="theButton">Click me</button>

JavaScript:

jQuery(function($) {

  $("#theButton").click(function() {
    $("#elementId").stop().css("marginLeft", "0").animate({
            marginLeft: "-=100"
        }, 1000, function() {
            //Complete
            display("Done, click the button again to see the repeat");
        }
    );
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});