Question

我使用以下代码来模拟手风琴滑块。它工作正常。我唯一的问题是，我无法从第一个块正常移动到第二个（我直接跳到第三个）和第四个到第三个（我直接跳到第二个）。关于如何控制它的任何想法????

html

<div id="slider1">
</div><!--slider1 end -->
<div id="slider2">
</div><!--slider2 end -->
<div id="slider3">
</div><!--slider3 end -->
<div id="slider4">
</div><!--slider4 end -->

CSS

#slider1 {
        width:238px;
        border-left:1px solid #000;
        border-right:1px solid #FFF;
        border-top:1px solid #000;
        border-bottom:1px solid #000;;
        height:398px;
        overflow:hidden;
        float:left;
        box-shadow: inset -35px 0 15px 0px rgba(0,0,0,0.7);
        background-image:url(../images/slider1.jpg);
    }

    #slider1:hover {
            background-image:url(../images/slider1_hover.jpg);

}

        #slider2 {
        width:238px;
            border-left:1px solid #000;
        border-right:1px solid #FFF;
        border-top:1px solid #000;
        border-bottom:1px solid #000;;
        height:398px;
        overflow:hidden;
                float:left;
        /*box-shadow: inset -45px 0 5px -5px hsla(0,0%,0%,.25);*/
        box-shadow: inset -45px 0 15px 0px rgba(0,0,0,0.6);
        background-image:url(../images/slider2.jpg);
    }

        #slider2:hover {
            background-image:url(../images/slider2_hover.jpg);
}
        #slider3 {
        width:238px;
            border-left:1px solid #000;
        border-right:1px solid #FFF;
        border-top:1px solid #000;
        border-bottom:1px solid #000;;
        height:398px;
        overflow:hidden;
                float:left;
        box-shadow: inset -45px 0 15px 0px rgba(0,0,0,0.6);
        background-image:url(../images/slider3.jpg);
    }

        #slider3:hover {
            background-image:url(../images/slider3_hover.jpg);
}
        #slider4 {
        width:238px;
            border-left:1px solid #000;
        border-right:1px solid #000;
        border-top:1px solid #000;
        border-bottom:1px solid #000;;
        height:398px;
        overflow:hidden;
                float:left;
        box-shadow: inset -45px 0 15px 0px rgba(0,0,0,0.6);
        background-image:url(../images/slider4.jpg);

    }

        #slider4:hover {
            background-image:url(../images/slider4_hover.jpg);
}

的javascript

$(document).ready(function() {

  $("#slider1").hover(
    //on mouseover
    function() {

        $(this).stop(false, true).animate({  
        width: '+=412' //adds 250px
        }, 'slow' //sets animation speed to slow

      );
      $(slider2).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider3).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider4).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider5).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    },
    //on mouseout
     function() {
      $(this).stop(false, true).animate({
        width: '-=412px' //substracts 250px

        }, 'slow' 
      );
       $(slider2).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider3).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider4).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider5).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    }
  );
});

$(document).ready(function() {

  $("#slider2").hover(
    //on mouseover
    function() {
      $(this).stop(false, true).animate({   
        width: '+=412' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
      $(slider1).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider3).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider4).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider5).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    },
    //on mouseout
     function() {
      $(this).stop(false, true).animate({
        width: '-=412px' //substracts 250px

        }, 'slow' 
      );
       $(slider1).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider3).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider4).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider5).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    }
  );
});

$(document).ready(function() {

  $("#slider3").hover(
    //on mouseover
    function() {
      $(this).stop(false, true).animate({   
        width: '+=412' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
      $(slider2).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider1).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider4).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider5).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    },
    //on mouseout
     function() {
      $(this).stop(false, true).animate({
        width: '-=412px' //substracts 250px

        }, 'slow' 
      );
       $(slider2).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider1).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider4).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider5).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    }
  );
});

$(document).ready(function() {

  $("#slider4").hover(
    //on mouseover
    function() {
      $(this).stop(false, true).animate({   
        width: '+=412' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
      $(slider2).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider3).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider1).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider5).stop(false, true).animate({   
        width: '-=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    },
    //on mouseout
     function() {
      $(this).stop(false, true).animate({
        width: '-=412px' //substracts 250px

        }, 'slow' 
      );
       $(slider2).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider3).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider1).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
        $(slider5).stop(false, true).animate({   
        width: '+=138' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    }
  );
});

这里也是jsfiddle

http://jsfiddle.net/atseros/zajnwuzo/1/

Answer 1

这是怎么回事？我在HTML中添加了一个类

HTML

`

<div id="slider1" class="slider">
</div><!--slider1 end -->
<div id="slider2" class="slider">
</div><!--slider2 end -->
<div id="slider3" class="slider">
</div><!--slider3 end -->
<div id="slider4" class="slider">
</div><!--slider4 end -->

`

的jQuery

    $(document).ready(function() {
      $(".slider").hover(
    //on mouseover
    function() {

        $(this).stop(false, true).animate({  
        width: '+=412' //adds 250px
        }, 'slow' //sets animation speed to slow

      );
    },
    //on mouseout
     function() {
      $(this).stop(false, true).animate({
        width: '-=412px' //substracts 250px

        }, 'slow' 
      );
    }
  );
});

Fiddle这里不确定这是不是你想要的。

jquery animate问题手风琴滑块

1 个答案: