Question

当窗口调整到一定大小（宽度低于960px）时，我试图让div淡入或淡出，并且用户点击显示另一个div的按钮，这样它们就不会重叠在低屏幕尺寸。这是有效的：

jQuery(window).resize(function() {
    if ( jQuery(window).width() < 960) {
        jQuery(".main").animate({"top":"22%"});

        jQuery('#tblcontents').toggle(function() {
            jQuery(".main").fadeOut(1000);
        }, function(){ 
            jQuery(".main").fadeIn(1000);
            jQuery(".main").animate({"top":"22%"});
        });
    }
});

jQuery(window).resize(function() {
    if (jQuery(window).width() > 960) {
        jQuery(".main").stop(true, true);
    }
});

但是我的问题出现了，当用户重新调整窗口大小到960px以上时，fadeIn和fadeOut保持活动状态，我该如何解决？我已经尝试了上面的例子：

jQuery(window).resize(function() {
    if ( jQuery(window).width() < 960) {
        jQuery(".main").animate({"top":"22%"});

        jQuery('#tblcontents').toggle(function(){
            jQuery(".main").fadeOut(1000);
        }, function(){ 
            jQuery(".main").fadeIn(1000);
            jQuery(".main").animate({"top":"22%"});
        });
    } else {
        jQuery(".main").stop(true, true);
    }

});

和此：

jQuery(window).resize(function() {
    if ( jQuery(window).width() < 960) {
        jQuery(".main").animate({"top":"22%"});

        jQuery('#tblcontents').toggle(function(){
            jQuery(".main").fadeOut(1000);
        }, function(){ 
            jQuery(".main").fadeIn(1000);
            jQuery(".main").animate({"top":"22%"});
        });
    } else {
        jQuery(".main").finish();
    }
});

以及：

jQuery(window).resize(function() {
    if (jQuery(window).width() < 960) {
        jQuery(".main").animate({"top":"22%"});

        jQuery('#tblcontents').toggle(function(){
            jQuery(".main").fadeOut(1000);
        }, function(){ 
            jQuery(".main").fadeIn(1000);
            jQuery(".main").animate({"top":"22%"});
        });
    } else {
        jQuery(".main").unbind();
    }
});

似乎没什么用，谢谢你抽出时间。

克里斯

Answer 1

这就是我要解决的问题：

   var main = $(".main"),
   sbContainer = $("#sb-container"),
   sbContainerDiv = sbContainer.find("div");
   tblcontents = $('#tblcontents');
   tblcontentstwo = $('#tblcontents_2')



  function animate() { 
   sbContainerDiv.css({ 
       "transform": "rotate(0deg)",
           "-webkit-transform": "rotate(0deg)",
           "-ms-transform": "rotate(0deg)",
           "-moz-transform": "rotate(0deg)",
           "-o-transform": "rotate(0deg)"
   });

   main.animate({
       "right": "1%"
   }, "slow");
}

   function toggletwo() {

   var toggleStatetwo = true;
   $(tblcontents).on("click", function () {
       if (toggleStatetwo) {
           animate({
               "top": "15%"
           });
           main.fadeOut(1000);
       } else {
           animate();
           main.fadeIn(1000);
       }
       toggleStatetwo = !toggleStatetwo;
   });

 }

 function toggleone() {
   $(tblcontents).on("click", function () {
       animate({
           "top": "1%"
       });
       main.stop(true, true);
   });

 }

 $(window).resize(function () {
   if ($(window).width() < 960) {
       toggletwo();
       animate();
   } else {
       toggleone();
   }
 });


 if ($(window).width() < 960) {
   toggletwo();
 } else {
   toggleone();
}

 $(window).scroll(function () {
   if ($(this).scrollTop() > 20) {
       toggleone();
       animate();
   } else {

   }
 });
 var toggleState = true;
$('.toggle_div').on("click", function () {
   if (toggleState) {
       main.animate({
           "right": "50%"
       }, "slow");
   } else {
       main.animate({
           "right": "1%"
       }, "slow");
   }
   toggleState = !toggleState;
 });

希望这有助于任何人...

jQuery unbind或删除fadeIn fadeOut？

1 个答案: