0

这是我为每个 div 制作动画的 jquery 代码。但是需要一些时间来更新每个动画（每个动画都是一样的）。是否可以使用相同的动画代码声明一个函数并在 jquery 代码中调用它（在每个鼠标悬停函数中）

jQuery

$(document).ready(function()
{

    $("#s1").mouseover
    (
        function test()
        {
            $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
        }
    );


    $("#s2").mouseover
    (
        function()
        {
            $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
        }
    );


    $("#s3").mouseover
    (
        function()
        {
            $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
        }
    );


    $("#s4").mouseover
    (
        function()
        {
            $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
        }
    );

    $("#s5").mouseover
    (
        function()
        {
            $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
        }
    );


    $("#s6").mouseover
    (
        function()
        {
            $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
        }
    );


    $("#s7").mouseover
    (
        function()
        {
            $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
        }
    );


    $("#s8").mouseover
    (
        function()
        {
            $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
        }
    );


    $(".speeddial").mouseout
    (
        function()
        {
            $(this).stop().animate({borderColor:"#AEAEAE",backgroundColor:"#49A655", color:"#FFFFFF"},300);
        }
    );      
}

);

HTML

 <a href="#"><div class="speeddial" id="s1">POPIS GOLUBOVA</div></a> 
  <a href="#"><div class="speeddial" id="s2">POPIS GOLUBOVA</div></a> 
  <a href="#"><div class="speeddial" id="s3">POPIS GOLUBOVA</div></a> 
  <a href="#"><div class="speeddial" id="s4">POPIS GOLUBOVA</div></a> 
    <div style="clear:both; margin-top:25px;"></div>
  <a href="#"><div class="speeddial" id="s5">POPIS GOLUBOVA</div></a> 
  <a href="#"><div class="speeddial" id="s6">POPIS GOLUBOVA</div></a> 
  <a href="#"><div class="speeddial" id="s7">POPIS GOLUBOVA</div></a> 
  <a href="#"><div class="speeddial" id="s8">POPIS GOLUBOVA</div></a>
4

3 回答 3

3

您可以单独声明该函数：

//(I indented some of it for easier readability)
function mouseOverFunc() {
    $(this).stop().animate({
        borderColor: "#49A655",
        backgroundColor: "#333",
        color: "#49A655"
    }, 300);
}

然后：

$("#s1").mouseover(mouseOverFunc)
$("#s2").mouseover(mouseOverFunc)
$("#s3").mouseover(mouseOverFunc)
// etc.

此外，由于它们都具有相同的类，因此您可以使其更加简洁：

$(".speeddial").mouseover(mouseOverFunc)
于 2013-03-17T15:14:26.510 回答
1

使用多重选择器，如下所示：

$("#s1, #s2, #s3, #s4, #s5, #s6, #s7").mouseover( function(){
     $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
});

或者更简单地说：

$(".speeddial").mouseover( function(){
     $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
});

为了提高性能，您应该使用 CSS 3 过渡，并且只使用 jquery 和 fallback：

.speeddial {
   //your CSS code
   border-color: #AEAEAE;
   background-color:#49A655;

   -moz-transition: all 300ms linear;
   -webkit-transition: all 300ms linear;
   -o-transition: all 300ms linear;
   transition: all 300ms linear;
}


.speeddial:hover {
    background-color: #333;
    border-color: #49A655;
 }
于 2013-03-17T15:28:22.727 回答
0

所有mouseenter功能似乎都相同？如果我错了，请纠正我，并且所有锚标签都具有相同的类，因此将其应用于类而不是 ID。

试试这个。

$('.speeddial').on('mouseenter',function(){
   $(this).stop().animate({borderColor:"#49A655",backgroundColor:"#333", color:"#49A655"},300);
});

$('.speeddial').on('mouseleave',function(){
   $(this).stop().animate({borderColor:"#AEAEAE",backgroundColor:"#49A655", color:"#FFFFFF"},300);
});
于 2013-03-17T15:17:13.240 回答