jquery - 创建流体布局并需要 JQuery 在大小更改时重置

Question

嗨，我目前正在通过 Div 制作淡入/淡出图像，在这个问题上，我从“TheHe”得到了一些很大的帮助，因为我正在构建它以在多个设备上工作，所以我需要脚本才能工作当屏幕尺寸超过 950 像素时。这在 iPad 上从水平移动到垂直时最为明显，因此我希望脚本在屏幕更改时自行重置。如果你访问http://playing.everythingcreative.co.uk你会明白我的意思...谢谢

if( $(window).width() > 950)
    {

        $(".Content_Frame_Container")
        .each(function(){
            $(this).find('.Content_Frame_Image');
        })
        .hover( 
            function(){
                $(this).find('.Content_Frame_Image').stop(false, true).fadeOut('slow');
            }, 
            function(){
                $(this).find('.Content_Frame_Image').stop(false, true).fadeIn('slow');
            }
        );

    }

Answer 1

您的完整解决方案是：

<script type="text/javascript">
"use strict";
$(document).ready(function() {
    var $containers = $(".Content_Frame_Container");
    $(window).resize(function(){
        if($(this).width() > 950)
                return;
        $containers.each(function(){
            $(this).trigger('mouseleave');
        });
    });

    $containers
     .hover(function(){
             console.log('fadeout');
             $(this).find('.Content_Frame_Image').stop(false, true).fadeOut('slow');
         }, 
         function(){
            if($(window).width() <= 950)
                return;
             console.log('fadeout');
             $(this).find('.Content_Frame_Image').stop(false, true).fadeIn('slow');
         });         
 });
</script>

Answer 2

将您的代码封装成以下内容：

$(window).resize(function(){
     // your code here
}).trigger('resize');