-1

当窗口已调整为特定大小（低于 960 像素宽度）时，我试图让 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);
    }
});

但是当用户将窗口大小重新调整到 960 像素以上时，我的问题就出现了，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();
    }
});

似乎没有任何工作，感谢您抽出宝贵的时间。

克里斯

4

1 回答 1

0

这是我为解决它所做的：

   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;
 });

希望这对任何人都有帮助...

于 2013-03-30T22:39:20.377 回答