-1

ウィンドウが特定のサイズ (幅 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以上に変更すると、フェードインとフェードアウトがアクティブなままになると、私の問題が発生します。これを解決するにはどうすればよいですか? これと一緒に上記の例を試しました：

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 に答える