滑块不再移动Jquery

Question

我使用 css 创建了一个滑块，当用户单击 向左移动 时，它具有左右两个链接，滑块向左移动 500 像素，单击 向右移动 strong> 然后滑块向右移动 500px 。问题是它只移动一次。我希望它在每次用户点击向左移动或向右移动时移动。

这是 HTML 代码：

<div id="genericslider">
    <a href="#" class="left">Move Left</a>
    <a href="#" class="right">Move Right</a>
        <div id="content" class="scroller touchcarousel wide">



            <ul class="block-list scroller touchcarousel-container">

                <li id="post-833" class="post-833 graff-history type-graff-history status-publish hentry touchcarousel-item intro">
                    <header class="entry-header">
                        <h1 class="formatted-title">
                                                    <span style="padding-left:0px;font-size:25px">Press Releases</span> <span class="part-1"></span></h1>

                    </header><!-- .entry-header -->
                    <div class="entry-content">
                    Our presence in Indian Press
        &nbsp;          </div>
        <p style="font-size:10px !important" ><a href="#" id="click"> Click and drag your mouse</a></p>
                </li><!-- #post-833 -->

                        <li class="touchcarousel-item history-items horiz hide-before-ready" style="width: 17700px;">

        <div id="post-833" class="post-833 graff-history type-graff-history status-publish hentry history-item">

            <div class="entry-thumbnail">


            <div class="entry-content">
                            <h2 class="heading" style="padding-top:290px"><a href="#">3<sup>rd</sup> Aug 2013</a></h2>
                            <p>Kolhapur Times</p>
                        <div class="building-icon"> <img width="174" height="175" src="../../images/12345.jpg" class="attachment-history-thumbnail wp-post-image" alt="Times Asia" title="Times Asia" style="box-shadow: 5px 5px !important";/></a> </div>

            </div>

        </div>

        <div id="post-839" class="post-839 graff-history type-graff-history status-publish hentry history-item">
            <div class="entry-content">
                            <h2 class="heading" style="padding-left:10px"><a href="#">4<sup>th</sup> Aug 2013</a></h2>
                            <p style="padding-left:10px">Kolhapur Times</p>
                    <div class="building-icon"><img width="174" height="175" src="../../images/23456.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div>

            </div>

        </div>

        <div  class="post-839 graff-history type-graff-history status-publish hentry history-item">
            <div class="entry-content">
                            <h2 class="heading" style="padding-top:290px"><a href="#">16<sup>th</sup>Aug 2013</a></h2>
                            Bangalore Times</h2>
                    <div class="building-icon"><img width="174" height="175" src="../../images/TOIBG_2013_8_16_27.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div>

            </div>

        </div>

        <div id="post-841" class="post-841 graff-history type-graff-history status-publish hentry history-item">
            <div class="entry-content">
                            <h2 class="heading" style="padding-top:0px"><a href="#">30<sup>th</sup>Aug 2013</a></h2>
                            Bombay Times</h2>
                    <div class="building-icon"><img width="174" height="175" src="../../images/TOIM_2013_8_30_37.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div>

            </div>

        </div>

        <div id="post-841" class="post-841 graff-history type-graff-history status-publish hentry history-item">
            <div class="entry-content">
                            <h2 class="heading" style="padding-top:290px"><a href="#">13<sup>th</sup>Sep 2013</a></h2>
                            Ahmedabad Times</a></h2>
                    <div class="building-icon"><img width="174" height="175" src="../../images/TOIA_2013_9_13_24.jpg" class="attachment-full" alt="Times Gehena Pune" title="Times Gehena Pune" /></div>

            </div>
    </ul>

    </div>

这里是 Jquery 代码：

<script>
$(document).ready(function(){
$(".left").click(function(){
    $(".touchcarousel-item").animate({left:'-500px'});
    //alert();
})
$(".right").click(function(){
    $(".touchcarousel-item").animate({right:'-500px'});
})
})
</script>

Answer 1

$("#genericslider").on("click",".left",function(e){
   e.preventDefault();
    $(".touchcarousel-item").animate({left:'-500px'});
    //alert();
})


$("#genericslider").on("click",".right",function(e){
   e.preventDefault();
    $(".touchcarousel-item").animate({right:'-500px'});
    //alert();
})

Answer 2

问题是您将项目设置为同一点的动画。单击其中一个按钮后，动画将变为“-500px”。再次单击它后，它会尝试再次设置动画，但位置已经为“-500px”，因此没有任何变化。

试试下面的代码：

<script>
$(document).ready(function(){
$(".left").click(function(){
    var currentPosition = parseInt( $(".touchcarousel-item").css('left') );
    $(".touchcarousel-item").animate({left: currentPosition - 500});
    //alert();
})
$(".right").click(function(){
    var currentPosition = parseInt( $(".touchcarousel-item").css('right') );
    $(".touchcarousel-item").animate({right: currentPosition - 500});
})
})
</script>

此外，我建议只为 left 或 right 值设置动画，而不是同时设置两者。例如：当点击.left 时，您会为left: currentPosition - 500 制作动画，当您点击.right 时，您会为left: currentPosition + 500 制作动画。