Question

在下面的jQuery中，我的目标是在960px或更大的屏幕上使我的网站“动画”，并在小于960px的屏幕上使用fadein / out。

如果我的浏览器大小超过960，那么animate就可以正常工作;然而，当我将我的浏览器调整到960px以下时，它仍然会激活div（而不是fadein / out）。不过，如果我将浏览器的大小调整到960px以下并刷新，那么fadein / out就可以了（如果我从这里调整大小超过960px而不刷新，则fadein / out仍然不是动画）。

所以看起来我使用的jQuery代码测量浏览器打开/刷新时的屏幕大小，然后相应地操作 - 不适应浏览器大小的任何更改。这是一个问题，因为我希望代码能够响应浏览器大小的任何变化（无需刷新）。

请帮忙。

罪犯似乎是：

（A） if（$（window）.width（）＆gt; = 960）{

（B）}否则if（$（window）.width（）＆lt; 960）{

JQuery的：

if ($(window).width() >= 960) {     


$('a.forMovingPanel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');

    if ($(".forMovingPanel").is(':animated')) return false;

    if (!$target.hasClass('active')) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: $this.width()
            }, 500);
        });

        $target.addClass('active').show().css({
            left: -($target.width())
        }).animate({
            left: 0
        }, 500);
    }
    });


$('a.portfolioThumbs').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');

    if ($(".portfolioThumbs").is(':animated')) return false;

    if (!$target.hasClass('active')) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: $this.width()
            }, 500);
                });

        $target.addClass('active').show().css({
            left: -($target.width())
        }).animate({
            left: 0
        }, 500);
    }
    });



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

    $('a.forMovingPanel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');

    if ($(".forMovingPanel").is(':animated')) return false;

    if (!$target.hasClass('active')) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').fadeOut(200);
        });

        $target.addClass('active').fadeIn(200);
    }
});




   $("a.forMovingPanel").click(function(ev) {
   ev.preventDefault();
   });


$('a.portfolioThumbs').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active');

    if ($(".portfolioThumbs").is(':animated')) return false;

     if (!$target.hasClass('active')) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').fadeOut(200);
            });

            $target.addClass('active').fadeIn(200);
        }
     });


     $("a.portfolioThumbs").click(function(ev) {
       ev.preventDefault();
       });



}

Answer 1

你需要$（window）.resize（）才能做到这一点。我要做的是

    $(window).ready(function(){

    foo();

    // the below is to call foo whenever window is resized
    $(window).resize(function() {
        foo();
    });

})

function foo(){
    if ($(window).width() >= 960) {    

        $('a.forMovingPanel').click(function() {
            var $target = $($(this).attr('href')),
                $other = $target.siblings('.active');

            if ($(".forMovingPanel").is(':animated')) return false;

            if (!$target.hasClass('active')) {
                $other.each(function(index, self) {
                    var $this = $(this);
                    $this.removeClass('active').animate({
                        left: $this.width()
                    }, 500);
                });

                $target.addClass('active').show().css({
                    left: -($target.width())
                }).animate({
                    left: 0
                }, 500);
            }
        });


        $('a.portfolioThumbs').click(function() {
            var $target = $($(this).attr('href')),
                $other = $target.siblings('.active');

            if ($(".portfolioThumbs").is(':animated')) return false;

            if (!$target.hasClass('active')) {
                $other.each(function(index, self) {
                    var $this = $(this);
                    $this.removeClass('active').animate({
                        left: $this.width()
                    }, 500);
                        });

                $target.addClass('active').show().css({
                    left: -($target.width())
                }).animate({
                    left: 0
                }, 500);
            }
        });



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

        $('a.forMovingPanel').click(function() {
            var $target = $($(this).attr('href')),
                $other = $target.siblings('.active');

            if ($(".forMovingPanel").is(':animated')) return false;

            if (!$target.hasClass('active')) {
                $other.each(function(index, self) {
                    var $this = $(this);
                    $this.removeClass('active').fadeOut(200);
                });

                $target.addClass('active').fadeIn(200);
            }
        });




       $("a.forMovingPanel").click(function(ev) {
        ev.preventDefault();
       });


        $('a.portfolioThumbs').click(function() {
            var $target = $($(this).attr('href')),
                $other = $target.siblings('.active');

            if ($(".portfolioThumbs").is(':animated')) return false;

             if (!$target.hasClass('active')) {
                $other.each(function(index, self) {
                    var $this = $(this);
                    $this.removeClass('active').fadeOut(200);
                    });

                    $target.addClass('active').fadeIn(200);
                }
             });


            $("a.portfolioThumbs").click(function(ev) {
               ev.preventDefault();
            });
    }
}

希望这会有所帮助：）

'if window width'jquery命令无法响应浏览器大小的变化。需要等效

1 个答案: