DEMO Here

**

首先，我点击按钮显示第一个div。好的和工作。

现在我点击显示在div及其幻灯片和其他div显示的列表项之一。它的确定和工作正常。

但问题是如果我点击列表项目的时间数，那么div会多次滑动。

即。如果我点击列表项5次，则div幻灯片继续五次。

我只想滚动div一次，无论我点击可见div多少次。

这是我的代码。

    <div>
        <input type="submit" id = "submit" value = "Show panel"/>
        <span id = "showpanel1"></span>
    </div>

    <div id = "slider"  style = "display:none">
        <div class = "panel1" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>

                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>
        <!--
        <div class = "panel2" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>
        -->
    </div>


    <!-- Load Loder GIF -->


        <div id = "loader" style = "display:none">
            <img src = "loader.gif">
        </div>

    <!-- QnA Div Start -->

    <div id = "qaslider"  style = "display:none">
        <div class = "mainpanel" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>


    </div>

Jquery的

$(document).ready(function() {
     var firsttext;
     $(".panel1").on('click','li',function (){
        $(".panel1").hide("slide", { direction: "left" }, 1000);
        //setTimeout(2000);
        $(".panel1").show("slide", { direction: "right" }, 1000);

    });

    $('#submit').click(function() {
        $(".mainpanel").hide();
        $("#slider").show("slide", { direction: "right" }, 0);
        $(".panel2").hide("slide", { direction: "right" }, 0);
        $(".panel1").show("slide", { direction: "right" }, 1000);
    });
});

CSS

.panel1 .panel1
    {
        border:1px solid black;
        margin-right:800;
        margin-top:20px;
    }
    #loader
    {
        margin-right:708;
        margin-top:117px;
        margin-left:525px;
    }
    .panel1 ul li:hover, .panel2 ul li:hover
    {
        cursor:hand
    }
    #slider > div {
      position:relative;
      float:left;
      width:500px;
      height:300px;
    }

Answer 1

如果已经有动画，请不要对动画进行排队 - 使用animated-selector检查panel1元素是否正在动画

$(".panel1").on('click', 'li', function () {
    if($(".panel1").is(':animated')){
        return false;
    }
    $(".panel1").hide("slide", {
        direction: "left"
    }, 1000);
    //setTimeout(2000);
    $(".panel1").show("slide", {
        direction: "right"
    }, 1000);

});

演示：Fiddle

Answer 2

使用：

$(document).one('click', '.panel1', function() {
    $(".panel1").hide("slide", { direction: "left" }, 1000);
    //setTimeout(2000);
    $(".panel1").show("slide", { direction: "right" }, 1000);
});

或者

$(".panel1").on('click','li',function (){  
if (!$(this).data("done")) {
    $(".panel1").hide("slide", { direction: "left" }, 1000);
    //setTimeout(2000);
    $(".panel1").show("slide", { direction: "right" }, 1000);
  $(this).data("done", true);
 } else {
    //clicked second time 
    $(this).data("done", true);
 }
});

Answer 3

您可以使用回调：

$(".panel1").on('click','li',function (){
         $(".panel1").hide("slide", { direction: "left" }, 1000, function(){
             $('.panel1').show("slide", { direction: "right" }, 1000);
         });
    });

See the Demo

Answer 4

将您的javascript更改为

var firsttext;
var is_moving = false;
$(".panel1").on('click', 'li', function () {
    if (!is_moving) {
        is_moving = true;
        $(".panel1").hide("slide", {
            direction: "left"
        }, 1000, function () {
            is_moving = false
        });
        //setTimeout(2000);
        $(".panel1").show("slide", {
            direction: "right"
        }, 1000, function () {
            is_moving = false
        });
    }
});

这将导致在发生更改时忽略任何点击

您还可以将事件绑定更改为委托，并且仅在面板未设置动画时触发

$(document).on('click', '.panel1:not(:animated) li', function () {
    $(".panel1").hide("slide", {
        direction: "left"
    }, 1000, function () {
        is_moving = false
    });
    //setTimeout(2000);
    $(".panel1").show("slide", {
        direction: "right"
    }, 1000, function () {
        is_moving = false
    });
})

Answer 5

简单地说，使用该单击操作为每个元素分配相同的类，一旦您执行了操作，就将其删除以用于特定元素。使用$（this）在保存大量代码行方面非常有用：

$(".myActionClass").click(function() { 
    /* Do your stuff here*/
    //Now remove the class and the action cannot happen again
    $(this).removeClass("myActionClass");
});

Jquery允许单击一次

DEMO Here

5 个答案:

See the Demo