JQuery - 如果您不将鼠标悬停在该 div 上，请执行此操作

发布于 2024-10-06 07:15:05 字数 860 浏览 7 评论 0原文

cardh = 0

$('.cardgreen > img').hover(function () {
    if (cardh == 0) {
        $('.card > img').animate({ height: 150, width: 193, opacity: '1', left: 0, top: 9 }, 500);
        $('.anfahrtlink').animate({ opacity: '0' }, 500).animate({ width: 0 }, 0);
        $('.cardgreen > img').animate({ opacity: '0' }, 500).animate({ opacity: '1' }, 500);
        cardh = 1
    }
});

$('.cardgreen > img').notanymore().hover(function () {
    if (cardh == 1) {
        $('.cardgreen > img').animate({ opacity: '0' }, 300);
        $('.anfahrtlink').animate({ width: 84 }, 0).animate({ opacity: '1' }, 500);
        $('.card > img').animate({ opacity: '1' }, 300).animate({ opacity: '0', width: 0, height: 0, left: 194, top: 75}, 270);
        cardh = 0
    }
});

怎么说 JQuery：当您没有将鼠标悬停在 div > 上时，执行第二件事不再有img了吗..？

原文

cardh = 0

$('.cardgreen > img').hover(function () {
    if (cardh == 0) {
        $('.card > img').animate({ height: 150, width: 193, opacity: '1', left: 0, top: 9 }, 500);
        $('.anfahrtlink').animate({ opacity: '0' }, 500).animate({ width: 0 }, 0);
        $('.cardgreen > img').animate({ opacity: '0' }, 500).animate({ opacity: '1' }, 500);
        cardh = 1
    }
});

$('.cardgreen > img').notanymore().hover(function () {
    if (cardh == 1) {
        $('.cardgreen > img').animate({ opacity: '0' }, 300);
        $('.anfahrtlink').animate({ width: 84 }, 0).animate({ opacity: '1' }, 500);
        $('.card > img').animate({ opacity: '1' }, 300).animate({ opacity: '0', width: 0, height: 0, left: 194, top: 75}, 270);
        cardh = 0
    }
});

How to say JQuery: DO THE 2nd thing when you're not hovering the div > img anymore..?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云柯 2024-10-13 07:15:05

传递给 .hover() 的第二个函数是 mouseleave 处理程序，如下所示：

$('.cardgreen > img').hover(function() {
  $('.card > img').animate({height: 150, width: 193, opacity: '1', left: 0, top: 9},500)
  $('.anfahrtlink').animate({opacity: '0',},500).animate({width:0},0);
  $('.cardgreen > img').animate({opacity: '0'},500)
                       .animate({opacity: '1'},500);
}, function() {
    $('.cardgreen > img').animate({opacity: '0'},300);
    $('.anfahrtlink').animate({width:84},0).animate({opacity: '1',},500)
    $('.card > img').animate({opacity: '1'},300)
                    .animate({opacity: '0', width: 0, height: 0, left:194, top:75},270);
});

.hover() 采用2 个处理程序 - 用于 mouseenter 和 mouseleave，或者像您一样，一个处理程序两者。但由于您想要悬停“进出”行为...请使用 2 处理程序版本。

The second function you pass to .hover() is the mouseleave handler, like this:

$('.cardgreen > img').hover(function() {
  $('.card > img').animate({height: 150, width: 193, opacity: '1', left: 0, top: 9},500)
  $('.anfahrtlink').animate({opacity: '0',},500).animate({width:0},0);
  $('.cardgreen > img').animate({opacity: '0'},500)
                       .animate({opacity: '1'},500);
}, function() {
    $('.cardgreen > img').animate({opacity: '0'},300);
    $('.anfahrtlink').animate({width:84},0).animate({opacity: '1',},500)
    $('.card > img').animate({opacity: '1'},300)
                    .animate({opacity: '0', width: 0, height: 0, left:194, top:75},270);
});

.hover() takes 2 handlers - for mouseenter and mouseleave, or like you had, a single handler that does both. But since you want hover "in and out" behavior...use the 2 handler version.

回复收藏 0 原文

悲喜皆因你 2024-10-13 07:15:05

jQuery .hover() 方法可以接受 2 个参数（请参见此处：http:// api.jquery.com/hover/）。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

handlerIn(eventObject) - 当鼠标指针进入元素时执行的函数。
handlerOut(eventObject) - 当鼠标指针离开元素时执行的函数。

the jQuery .hover() method can take 2 arguments (see here: http://api.jquery.com/hover/).

.hover( handlerIn(eventObject), handlerOut(eventObject) )

handlerIn(eventObject) - A function to execute when the mouse pointer enters the element.
handlerOut(eventObject) - A function to execute when the mouse pointer leaves the element.

回复收藏 0 原文

~没有更多了~