鼠标悬停时执行操作，鼠标移出时执行其他操作

发布于 2024-12-22 05:02:37 字数 971 浏览 3 评论 0原文

我在另一个问题中看到了这段代码，我想我也可以让它适用于图像，但由于我是 jquery 的新手，所以我没有做太多事情。

这是代码：

$('someObject').bind('mouseover', function() {

    //Do the following while mouseover 
    $('someOtherObject').css('margin-left',adjustedLeft + 'px');
    setTimeout(/*do it again*/,25);

});

我在这个问题中看到了它：一个“ JavaScript/jQuery 中的“if mouseover”或“do while mouseover”

下面还有一个示例，但该示例适用于文本字段。

我希望我的图像适用于图像，基本上我有 2 个图像一个接一个，我想制作一个淡入淡出的效果，所以像

当鼠标悬停时，每 0,01 秒，将不透明度降低 0.01，直到 0,01 当鼠标离开图像（按钮）的那一刻，停止降低不透明度并开始每 0.01 秒再次提高 0.01 直到 0.99 不透明度

再次澄清一下，我有 2 个图像（按钮）1 在另一个之上，我想降低然后提高上面按钮的不透明度。我还看到了另一种类型的淡入淡出，但 2 个按钮位于 1 个图像上，但对我（新手）来说，我猜它太先进了，但我可能会看看，我猜这是一种使用更少图像的好方法。

以防万一，这里也是示例的链接： http://jsfiddle.net/YjC6y/29/

原文

I saw this code in another question , I thought I might make it work for an image too, but since I am a newbie in jquery, I didn't do much.

Here is the code:

$('someObject').bind('mouseover', function() {

    //Do the following while mouseover 
    $('someOtherObject').css('margin-left',adjustedLeft + 'px');
    setTimeout(/*do it again*/,25);

});

I saw it in this question right here:
An "if mouseover" or a "do while mouseover" in JavaScript/jQuery

There is an example below it also, but that one works for text fields.

I want mine to work for images, basically i have 2 images one over another and i want to make a fading effect, so something like

while mouseover , every 0,01sec , lower the opacity by 0.01 ,till 0,01
the moment the mouse leaves the image(button) , stop lowering the opacity and start heightening it again by 0.01 every 0.01sec till 0.99 opacity

Just to be clear again , i got 2 images(buttons) 1 above the other , i want to lower and then heighten the opacity of the upper button.
Also i saw another type of fade , but the 2 buttons were on 1 image , but for me(the newbie) its too advanced i guess, but i might look at that , its a nice way to use less images i guess.

Just in case , here is the link to the example too : http://jsfiddle.net/YjC6y/29/

分享到QQ

分享到微博

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

发布评论

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

稚然 2024-12-29 05:02:37

$('someObject').mouseover(function() {
   $('someOtherObject').animate({
         opacity: 0
    })
}).mouseout(function() {
   $('someOtherObject').animate({
         opacity: 0.99
    })
});

$('someObject').mouseover(function() {
   $('someOtherObject').animate({
         opacity: 0
    })
}).mouseout(function() {
   $('someOtherObject').animate({
         opacity: 0.99
    })
});

回复收藏 0 原文

濫情▎り 2024-12-29 05:02:37

使用jquery悬停 http://api.jquery.com/hover/someObject

  $('someObject').hover(
        function () {
            // Set the effect you want when mouse is over the element
        },
        function () {
            // Set the effect for mouse leave
        }

    );

希望这有帮助:)

Use jquery hover http://api.jquery.com/hover/someObject

  $('someObject').hover(
        function () {
            // Set the effect you want when mouse is over the element
        },
        function () {
            // Set the effect for mouse leave
        }

    );

Hope this help :)

回复收藏 0 原文

~没有更多了~