jquery中的动画问题

发布于 2024-11-09 16:16:21 字数 488 浏览 5 评论 0原文

我试图将一个动画添加到有效的类中，但根本不起作用，因为我有一个属性没有设置，我知道为什么要检查它。

$(document).ready(initialize);

function initialize() {
    $(".imagePanel").hover(mouseOver,mouseOut);
}

function mouseOver() {
    $(this).animate({
        border:"2px"
        opacity: 0.25               
    }, 100);
}

function mouseOut() {
    $(this).animate({
        border: "2px",
        opacity: 0.25
    }, 100);
}

问题首先是它没有设置属性边框，其次是不知道如何删除鼠标移出功能中的不透明度。边框设置为 div 元素。谢谢。

原文

i'm trying to put an anitmation to class that works, but no at all because i have one property that's doesn't setting and i know why check this.

$(document).ready(initialize);

function initialize() {
    $(".imagePanel").hover(mouseOver,mouseOut);
}

function mouseOver() {
    $(this).animate({
        border:"2px"
        opacity: 0.25               
    }, 100);
}

function mouseOut() {
    $(this).animate({
        border: "2px",
        opacity: 0.25
    }, 100);
}

the problem it's first that the property border it's not setting and second that don't have any idea about to remove the opacity in the function mouse out. The borders are setting to a div element. Thanks.

分享到QQ

分享到微博

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

发布评论

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

红衣飘飘貌似仙 2024-11-16 16:16:21

您似乎无法在 animate 中设置边框，但可以使用 css：

$(document).ready(initialize);

function initialize() {
    $(".imagePanel").hover(mouseOver,mouseOut);
}

function mouseOver() {
    $(this).stop(true,true).animate({
        opacity: 0.25               
    }, 100, function() {
        $(this).css('border','2px solid black');
    });
}

function mouseOut() {
    $(this).stop(true,true).css('border','0 none').animate({
        opacity: 1
    }, 100);
}

参见示例 →

It doesn't seem that you can set the border within animate, but you can with css:

$(document).ready(initialize);

function initialize() {
    $(".imagePanel").hover(mouseOver,mouseOut);
}

function mouseOver() {
    $(this).stop(true,true).animate({
        opacity: 0.25               
    }, 100, function() {
        $(this).css('border','2px solid black');
    });
}

function mouseOut() {
    $(this).stop(true,true).css('border','0 none').animate({
        opacity: 1
    }, 100);
}

See example →

回复收藏 0 原文

一萌ing 2024-11-16 16:16:21

$(document).ready(function(){

    $(".imagePanel").mouseover(function() {
         $(this).animate({
             borderTopColor:"#FF00FF",
             borderBottomColor:"#FF00FF",
             borderLeftColor:"#FF00FF",
             borderRightColor:"#FF00FF",
             opacity: 0.25               
         }, 500);
    });

   $(".imagePanel").mouseout(function() {
         $(this).animate({
             borderTopColor:"#FFFFFF",
              borderBottomColor:"#FFFFFF",
             borderLeftColor:"#FFFFFF",
              borderRightColor:"#FFFFFF",
             opacity: 1
         }, 500);
    });

});

尝试一下。

http://jsfiddle.net/n2ugx/8/

$(document).ready(function(){

    $(".imagePanel").mouseover(function() {
         $(this).animate({
             borderTopColor:"#FF00FF",
             borderBottomColor:"#FF00FF",
             borderLeftColor:"#FF00FF",
             borderRightColor:"#FF00FF",
             opacity: 0.25               
         }, 500);
    });

   $(".imagePanel").mouseout(function() {
         $(this).animate({
             borderTopColor:"#FFFFFF",
              borderBottomColor:"#FFFFFF",
             borderLeftColor:"#FFFFFF",
              borderRightColor:"#FFFFFF",
             opacity: 1
         }, 500);
    });

});

Try that.

http://jsfiddle.net/n2ugx/8/

回复收藏 0 原文