Question

我有jQuery淡入淡出：http://dougie.thewestharbour.com/

当你将鼠标悬停在.main-overlay div上时，我希望它淡出然后当你将鼠标从它上移开时，我希望它能够淡入。

然而，你可以看到它现在只是闪烁。我猜这是因为div消失了所以当它消失时它被视为鼠标输出但是我不确定如何去解决它。

这是我的javascript：

    $(document).ready(function () {


    $('.main-overlay').hover(

        //Mouseover, fadeIn the hidden hover class 
        function() {

            $(this).fadeOut('1000');

        },

        //Mouseout, fadeOut the hover class
        function() {

            $(this).fadeIn('1000');   

    }).click (function () {

        //Add selected class if user clicked on it
        $(this).addClass('selected');

    });

});

这是叠加div附加到的项目之一：

<li><div class="main-overlay"></div><span class="caption">The store front</span><img src="http://dougie.thewestharbour.com/wp-content/uploads/store-front.jpg" alt="store front" title="store-front" width="730" height="360" class="alignnone size-full wp-image-98" /></li>

谢谢，

瓦德

Answer 1

这种情况正在发生，因为fadeOut在其末尾有一个display:none，因此当您在fadeOut完成后移动鼠标时，它将触发取消切换功能。相反，只需animate opacity：

$('.main-overlay').hover(function() {
    $(this).animate({opacity: 0}, 1000);
}, function() {
    $(this).animate({opacity: 1}, 1000);
})

Example →

Answer 2

正如其他答案所提到的，display:none在最后设置了fadeTo，因此该元素不再影响页面的布局。仅仅为不透明度设置动画的建议是正确的，但是已经有了这样做的功能$('.main-overlay').hover( //Mouseover, fadeIn the hidden hover class function() { $(this).fadeTo(0,1000); }, //Mouseout, fadeOut the hover class function() { $(this).fadeTo(1,1000); })，这比自己编写动画要简单得多：

#ifdef FLAVOUR1
    NSURL *preferencesFile = [[NSBundle mainBundle] URLForResource:@"preferences-flavour1" withExtension:@"plist"];
    NSDictionary *defaultPreferences = [NSDictionary dictionaryWithContentsOfURL:defaultPreferencesFile];
    [[NSUserDefaults standardUserDefaults]  registerDefaults:preferences];
#endif
#ifdef FLAVOUR2
    NSURL *preferencesFile = [[NSBundle mainBundle] URLForResource:@"preferences-flavour2" withExtension:@"plist"];
    NSDictionary *defaultPreferences = [NSDictionary dictionaryWithContentsOfURL:defaultPreferencesFile];
    [[NSUserDefaults standardUserDefaults]  registerDefaults:preferences];
#endif
#ifdef FLAVOUR2
    NSURL *preferencesFile = [[NSBundle mainBundle] URLForResource:@"preferences-flavour3" withExtension:@"plist"];
    NSDictionary *defaultPreferences = [NSDictionary dictionaryWithContentsOfURL:defaultPreferencesFile];
    [[NSUserDefaults standardUserDefaults]  registerDefaults:preferences];
#endif

jQuery淡出闪烁

2 个答案: