Question

我是jQuery的新手，并且解决了这个问题。在我的document.ready函数.animate（）效果不起作用，当我在链接上应用的click事件发生时，所以它不是左右滚动。任何人都可以告诉我这有什么问题，这样它就会向左和向右滚动。

<html>
<head>
<style type="text/css">
ul.images 
{
  padding:0px;
  margin:0px;
  white-space: nowrap;
  width:auto;
  overflow:hidden;
}

ul.images li 
{
  line-height:200px;
  display: inline;

}


</style>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script language="javascript">
var totalWidth;
 $(document).ready(function(){
        $("a.abc").click(function() {
            $("#scroller").animate({"scrollLeft":"-=204"},"slow");
            return false;
        });
        $("a.def").click(function() {
            $("#scroller").animate({"scrollRight":"+=204"},"slow");
            return false;
        });
});

</script>

</head>
<body>
<div style="width:1450px">
    <div style="float:left;">
        <a class="abc" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle"><img src="backward.png" height="50" width="50"/></a>
    </div>

        <div style="width:1220px;float:left">
            <ul class="images" id="scroller">
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li> 
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li> 
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>       
            </ul>
        </div>

    <div style="float:left;">
        <a class="def" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle;"><img src="forward.png" height="50" width="50"/></a>
    </div>
</div>
</body>
</html>

Answer 1

试试这个：

<div style="width:1050px">
<div style="float:left;">
    <a class="abc" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle">PREV</a>
</div>

    <div style="width:1220px;float:left">
        <ul class="images" id="scroller">
            <li class="list"><img src="http://placehold.it/350&text=TEST1" class="image" alt="anuj"  width="200"/></li>
            <li class="list"><img src="http://placehold.it/350&text=TEST2" class="image" alt="anuj"  width="200"/></li>
            <li class="list"><img src="http://placehold.it/350&text=TEST3" class="image" alt="anuj"  width="200"/></li>
            <li class="list"><img src="http://placehold.it/350&text=TEST4" class="image" alt="anuj"  width="200"/></li>     
        </ul>
    </div>

<div style="float:left;">
    <a class="def" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle;">NEXT</a>
</div>

$("a.abc").click(function() {
    $(".images").each(function(){
        $(this).animate({"margin-left":"-=204px"},800)  
            });
});

$("a.def").click(function() {
            $(".images").each(function(){
                $(this).animate({"margin-left":"+=204px"},800)
            });
});

见：http://jsfiddle.net/MMyGE/

Answer 2

语法：.animate（{'css property'，'value'}，'speed'），如果你想要动画，那么.animate（{'left'，'100px'}，'800'）左边只是在值之前添加一个（减号），否则它将动画到右边。还注意到animate不支持所有css属性。

如何在按钮单击时左右滚动添加动画效果？

2 个答案: