在JQuery中更改颜色

我可以在JQuery中使用CSS来缓慢更改div的颜色吗？哦，还有一件事，我怎样才能给我的<div>添加第二个功能。这是代码。我想在发生mouseout时将颜色改回原来的颜色。在JQuery中更改颜色

<script> 
    function myFunction() { 
     $(document).ready(function() { 
      $("#square").css({ backgroundColor: 'blue' }); 

     }); 

    } 
</script> 

<div id="square" onmouseover="return myFunction()">Focus on me!</div>

来源

2015-07-02 Altay Mazlum

http://stackoverflow.com/questions/6950988/jquery-change-css-attribute-slowly – Shivam

为了使它慢，给transition并删除document.ready因为你的东西没有负载称之为：

#square {transition: 1s all linear;}

跨浏览器支持

-webkit-transition: all 1s linear; 
-moz-transition: all 1s linear; 
-o-transition: all 1s linear; 
transition: all 1s linear;

片段

$(document).ready(function() { 
 
    $("#square").hover(function() { 
 
    $(this).css("backgroundColor", 'blue'); 
 
    }, function() { 
 
    $(this).css("backgroundColor", ''); 
 
    }); 
 
});

#square {width: 100px; height: 100px; transition: 1s all linear;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="square"></div>

来源

2015-07-02 08:25:38

谢谢，它解决了我的问题:) –

@AltayMazlum我也添加了一个片段！一探究竟。 –

太棒了！我也会用那个。 –

您可以使用.animate()来设定延迟的CSS效果：

$("#square").animate({backgroundColor: 'blue'}, 500});

来源

2015-07-02 08:25:28

怎么样慢慢的问题？ –

您将需要jQuery UI来动画颜色。 –

注： jQuery的UI的项目通过允许一些非数字风格，如颜色，以延伸.animate（）方法动画。该项目还包括通过CSS类指定动画而不是单独属性的机制。

使用.animate：

<script> 
    function myFunction() { 
     $(document).ready(function() { 
      $("#square").animate({ 
       backgroundColor: 'blue' 
      }, 500); 

     }); 

    } 
</script>

在这种情况下的过渡是500毫秒。

来源

2015-07-02 08:25:41 KittMedia

我认为这将需要jQuery UI .. –

不，你不需要。 http://api.jquery.com/animate/ – KittMedia

是的，动画功能是在jQuery中，但动画颜色，我认为你需要jQuery UI –

这个CSS规则结合您的代码

#square { 
    transition: 1s ease background; 
}

来源

2015-07-02 08:26:03

它没有回答这个问题，因为问题是关于如何在jQuery中完成的。 – KittMedia

那么，你可以用CSS做的一切，它不应该与jQuery .. –

是的，这回答了这个问题。为什么downvote？ –

在JQuery中更改颜色

回答

相关问题