Question

我有一个非常令人沮丧的问题。基本上我的目的是使用jQuery中的.toggle（）类在click上设置动画。问题是，负载div刚刚消失！我真的无法弄明白为什么......（实际的脚本已经在下面代码的CSS代码部分结束时结束了，我不知道为什么）

Here's JsFiddle link

HTML

<body>

    <!-- NAV -->

    <!-- SLIDER ONE-->
    <div class="container-fluid slides" style="padding-left: 0px; padding-right: 0px;">
        <!-- SLIDER ONE-->
        <div class="slider-one1 col-md-6 col-sm-6 col-xs-6"></div>
        <div class="slider-one2 col-md-6 col-sm-6 col-xs-6"></div>

        <div class="clearfix"></div>

        <!-- SLIDER TWO-->
        <div class="slider-two1 col-md-6 col-sm-6 col-xs-6"></div>
        <div class="slider-two2 col-md-6 col-sm-6 col-xs-6"></div>

    </div>


    <!-- cookies notificaton -->
    </body>

CSS

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden; }


.slides div:hover {
  opacity: 0.8; }


.slider-one1 {
  height: 40vh;
  width: 50vw;
  background-color: red;
  cursor: pointer; }


.slider-one2 {
  height: 40vh;
  width: 50vw;
  background-color: green;
  opacity: 0; }


.slider-two1 {
  height: 40vh;
  width: 50vw;
  background-color: blue;
  opacity: 0; }


.slider-two2 {
  height: 40vh;
  width: 50vw;
  background-color: pink;
  opacity: 0; }

的Javascript

    $(window).ready(function(){
       $(".slider-one1").toggle(function() {
        $(this).stop().animate({
            width: "98vw"
        }, 500);
    }, function() {
        $(this).stop().animate({
             width: "50vw"
        }, 500);
    });

    });

谢谢！

Answer 1

因为您在文档就绪时触发切换而不是单击。

然后，如果你想扩展结束恢复，请点击你的代码应该是这个

$（＆＃34; .slider酮-1,1-＆＃34）上（＆＃39;单击＆＃39;，函数（）{ $（本）.animate（{ 宽度：＆＃34; 98vw＆＃34; }，500，function（）{ $（本）.stop（）。动画（{ 宽度：＆＃34; 50vw＆＃34; }，500）; }）; }）;

如果您希望扩展第一次点击并在第二次点击时恢复（跟踪状态），您需要这样的东西

var state = false;

$(".slider-one1").on('click',function(){
    if(!state){
   $(this).animate({
        width: "98vw"
    }, 500);
    state = true;
    }
  else{
    $(this).animate({
         width: "50vw"
    }, 500);
  }
});

Updated jsfiddle（解决方案2）

Answer 2

ready没有window功能，应该是document而不是窗口。

$(document).ready(function(){.....});

<强>已更新

对于动画，请避免使用jquery .animate()，这样会使代码更复杂，而是编写css类，并使用css transitions动画，这是演示。

.animate1 {
  width: 98vw !important;
 -webkit-transition:all 0.5s ease;
 transition:all 0.5s ease; 
}

 $(document).ready(function(){
   $(".slider-one1").click(function(){   
        $(this).toggleClass("animate1");
   });

});

<强> Working Fiddle

jQuery div淡出了onload问题

2 个答案: