[英]How do I Gradual Zoom In while changing color on Mouse Hover and Gradual Zoom Out and fading color on mouse house
我要实现的是逐渐缩放图像,同时使新图像的颜色发生变化。 例如,黑色的图像苹果,而我还有另一个红色的图像苹果。 当您将鼠标悬停在黑色苹果上时,它将逐渐将其颜色变为红色。 问题是当我将鼠标悬停在鼠标上时,它会立即变为其他图像,然后缩小。 有任何想法吗? 还是有可能在jQuery中?
(函数($){“使用严格”;
// Start Documentation
$(document).ready(function () {
// About Us Title Text
$('.about_us_img,.about_us_txt').mouseover(function () {
{
$('.about_us_img').animate({
width: "216px"
}, 400);
$('.about_us_txt').css({
color: '#49968b'
});
$('.about_us_txt').animate({
fontSize: newSizeAU
}, 300);
$('.about_us_img').attr("src", AboutHut);
$(this).fadeTo('300', 0.9);
}
});
$('.about_us_img,.about_us_txt').mouseout(function () {
{
$('.about_us_img').animate({
width: "196px"
}, 400);
$('.about_us_txt').css({
color: '#000'
});
$('.about_us_txt').animate({
fontSize: oldSizeAU
}, 300);
$(this).fadeTo('300', 1);
$('.about_us_img ').attr("src", OrigHut);
}
});
var oldSizeAU = parseFloat($('.about_us_txt').css('font-size'));
var newSizeAU = oldSizeAU * 1.1;
//Our Project
$('.our_project_img,.our_project_txt').mouseover(function () {
{
$('.our_project_img').animate({
width: "216px"
}, 400);
$('.our_project_txt').css({
color: '#b26c64'
});
$('.our_project_txt').animate({
fontSize: newSizePR
}, 300);
$('.our_project_img').attr("src", ProjectHut);
$(this).fadeTo('300', 0.9);
}
});
$('.our_project_img,.our_project_txt').mouseout(function () {
{
$('.our_project_img').animate({
width: "196px"
}, 400);
$('.our_project_txt').css({
color: '#000'
});
$('.our_project_txt').animate({
fontSize: oldSizePR
}, 300);
$(this).fadeTo('300', 1);
$('.our_project_img').attr("src", OrigHut);
}
});
var oldSizePR = parseFloat($('.our_project_txt').css('font-size'));
var newSizePR = oldSizePR * 1.1;
//My Profile
$('.my_profile_img,.my_profile_txt').mouseover(function () {
{
$(this).fadeTo('300', 0.9);
$('.my_profile_img').animate({
width: "216px"
}, 400);
$('.my_profile_txt').css({
color: '#8db262'
});
$('.my_profile_txt').animate({
fontSize: newSize
}, 300);
$('.my_profile_img').attr("src", ProfileHut);
}
});
$('.my_profile_img,.my_profile_txt').mouseout(function () {
{
$('.my_profile_img').animate({
width: "196px"
}, 400);
$('.my_profile_txt').css({
color: '#000'
});
$('.my_profile_txt').animate({
fontSize: oldSize
}, 300);
$(this).fadeTo('300', 1);
$('.my_profile_img').attr("src", OrigHut);
}
});
var oldSize = parseFloat($('.my_profile_txt').css('font-size'));
var newSize = oldSize * 1.1;
/****
$('.my_profile_img,.my_profile_txt').mouseover(function () {
$('.my_profile_img,.my_profile_txt').fadeTo('slow', 0.8, function () {
$('.my_profile_img').animate({
width: newWidthSize
}, 500);
$('.my_profile_txt').animate({
fontSize: NewSize
}, 300);
$(this).fadeTo('200', 1);
$('.my_profile_img').attr('src', ProfileHut);
});
});
$('.my_profile_img,.my_profile_txt').mouseout(function () {
$('.my_profile_img').animate({
width: oldWidthSize
}, 500);
$('.my_profile_txt').animate({
fontSize: oldSize
}, 300);
$(this).fadeTo('300', 0.9, function () {
$('.my_profile_img').attr('src', OrigHut);
$(this).fadeTo('300', 1);
});
});
var oldWidthSize = parseFloat($('.my_profile_img').css('width'));
var newWidthSize = oldWidthSize * 1.1;
**/
// End Ready Documentation
});
})(jQuery);
jQuery不支持彩色动画。 但是,jQuery UI有一个可处理彩色动画的插件(有关彩色动画,请参见UI页面: http : //jqueryui.com/animate/ )。 您需要先安装jQuery UI并使用该插件,您可以在这里找到它: https : //github.com/jquery/jquery-color/
插件页面上也有一个很好的例子。
一旦安装了插件,就可以轻松设置颜色的动画。 以下摘录自插件文档的代码片段应使您了解其工作原理:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #bada55;
width: 100px;
border: 1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> //jQuery UI
<script src="jquery.color.min.js"></script> //plugin
</head>
<body>
<button id="go">Simple</button>
<button id="sat">Desaturate</button>
<div id="block">Hello!</div>
<script>
jQuery("#go").click(function(){
jQuery("#block").animate({
backgroundColor: "#abcdef"
}, 1500 );
});
jQuery("#sat").click(function(){
jQuery("#block").animate({
backgroundColor: jQuery.Color({ saturation: 0 })
}, 1500 );
});
</script>
</body>
</html>
看来您想在两个图像之间过渡,而不要更改单个图像的颜色,对吗?
此FIDDLE (单击小爪 )使小爪变大 ,然后逐渐消失,然后由米奇鼠标代替。 如果这是您要查找的常规内容,则可以有两张图像,它们的大小完全相同,但颜色不同,并且可以在小提琴中使用这些大小。
JS
$( ".imagediv" ).click(function(){
$( "#minion" ).animate({
height: 400,
width: 300
}, 3000,
function() {
$( "#minion" ).animate({
opacity: 0
}, 1000,
function() {
$('.imagediv').html( $('.hiddendiv img').clone() );
});
});
});//end click
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.