jquery - jquery中的动画问题

Question

我正在尝试将动画放到有效的类中，但根本没有，因为我有一个没有设置的属性，我知道为什么要检查这个。

$(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元素。谢谢。

Answer 1

您似乎无法在 内设置边框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);
}

查看示例 →

Answer 2

$(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/

Answer 3

我不确定您的问题是否足够清楚，但您的代码中存在问题。

mouseOut() 和 mouseOver() 函数是相同的。什么都不会发生。

jQuery animate() 将元素从它开始的地方带到您指定的最终状态。您的两个功能都相同，因此没有任何变化。