在jQuery上从左向右移动元素

我用这个在幻灯片中移动一个div。问题是每个图像的标题必须从同一位置（每个div）开始从左向右移动。 使用这段代码，div将根据需要移动，但下一个div将从放置最后一个div的点移动

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

以防我难以解释

我有一个幻灯片，每个图像淡入淡出，一秒钟后一个div和一些文本显示在每个图像的顶部，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>

---

从这个问题很难判断，但如果您使用的是相同的

div

，则需要重置

marginLeft

。例如：

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

（当然，如果起点不应该是

0

，请使用

10px

或其他任何东西。）如果在动画完成之前调用此选项，您可能还希望在此处抛出

停止

，但这取决于代码的其余部分正在执行的操作

|

HTML:

我是div
点击我

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);
  }

});

jQuery（函数（$）{
$（“#按钮”）。单击（函数（）{
$（“#elementId”）.stop（）.css（“marginLeft”，“0”）.animate({
边缘左侧：“-=100”
}，1000，函数（）{
//完整的
显示（“完成，再次单击按钮查看重复”）；
}
);
});
功能显示（msg）{
$（“”）.html（msg.appendTo（document.body）；
}
});

好的，我可以看到这个问题已经解决了，但我会使用插件；要简单得多。您可以在上看到它的实际操作。

您需要发布更多代码我们需要有关您的标记、样式和脚本其余部分的一些详细信息，以便回答此问题。已编辑的问题包含完整代码。谢谢你的邀请time@user983248：我就是不明白为什么重置

marginLeft

不起作用，这让我发疯，所以我将上面的所有内容复制到

marginLeft

重置中（根据我的答案，现在在上面的代码中），它似乎工作得很好。我遗漏了什么？@user983248:（如果你不做@thing，我就不会收到你评论的通知）。您的页面是否有

doctype

？jQuery在怪癖模式下不能可靠地工作（我认为他们不希望也不打算支持它）。这是我能想到的唯一一件事…@user983248:上面的问题没有回答吗？@user983248:“完整代码”甚至没有调用

动画

。。。？！对不起，我得让别人来处理，我得去工作了。。。祝你好运，对不起，我弄错了，代码应该是'if（photoObject.firstline！=“”）{jQuery（“#firstline”）.css（“marginLeft”，“0”）.animate（{marginLeft:-=100”}，4000，function（）{//Complete}）；'

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

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

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);
  }

});