2015-02-08 118 views
0

我有以下功能,這是應該改變背景顏色與淡入淡出,然後使用延遲返回到原來的顏色。並不斷重複。jQuery改變背景顏色與淡入淡出,並返回原來的延遲

$(function() { 
    $('div').animate({background-color: 'blue'}, 'slow', function() { 
    $(this).delay(500).animate({background-color: 'red'}, 'slow'); 
}); 
}); 

然而,它似乎並沒有工作... 任何想法如何解決呢?

+1

是嗎? http://stackoverflow.com/questions/4713477/how-to-make-a-jquery-infinite-animation – Stickers 2015-02-08 00:53:53

+0

你有沒有解決你的問題? – 2015-02-08 09:35:04

回答

0

請不要忘記包含jquery-ui庫。否則,這是行不通的

$(document).ready(function() { 
 

 
    $('.sample').click(function() { 
 

 
    $(this).animate({ 
 
     backgroundColor: "green" 
 
    }, 1000).delay(2000).queue(function() { 
 
     $(this).animate({ 
 
     backgroundColor: "red" 
 
     }, 1000).dequeue(); 
 
    }); 
 

 
    }); 
 

 
});
.sample { 
 
    font: normal 12px/18px 'Arial'; 
 
    color: #fff; 
 
    background: red; 
 
    padding: 20px; 
 
    cursor: pointer 
 
}
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
<div class="sample"> 
 
Click Me to see smooth background color transition and back to original background 
 
</div> 
 
</body>