Я пытаюсь получить простую анимацию jQuery, чтобы работать, и я не могу показаться, что это произошло. Я не уверен, что я пропустил простую проблему с синтаксисом или что-то большее. Образцы, которые я нашел в Интернете, похоже, тоже не работают, поэтому я решил, что попытаюсь получить второе мнение.
Соответствующие части головы следующие:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('.menu_ul li').mouseenter(
function() {
$('#menuitem1').animate({
'background-image': 'linear-gradient(to bottom, #1058c4 0%, #1058c4 100%)',
'color' : '#ffffff'
},500);
}
);
$('.menu_ul li').mouseleave(
function() {
$(this).animate({
'background-image' : 'linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%)',
'color' : '#343434'
},500);
}
);
});
</script>
HTML выглядит следующим образом:
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1"><a href="?content=home">HOME</a></li>
<li id="menuitem2"><a href="?content=home">PLAYLIST</a></li>
<li id="menuitem3"><a href="?content=home">COMMUNITY</a></li>
<li id="menuitem4"><a href="?content=home">ABOUT US</a></li>
</ul>
CSS для него выглядит следующим образом:
.menu_ul li {
padding-top:13px;
text-align:center;
display:block;
float:left;
color:#343434;
width:237px;
height:35px;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
}
Заранее спасибо.
Здесь один из способов изменения фонового градиента с изменением непрозрачности на вторичном элементе:
HTML
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1"><a href="?content=home">HOME</a><span> </span></li>
<li id="menuitem2"><a href="?content=home">PLAYLIST</a><span> </span></li>
<li id="menuitem3"><a href="?content=home">COMMUNITY</a><span> </span></li>
<li id="menuitem4"><a href="?content=home">ABOUT US</a><span> </span></li>
</ul>
JQuery
$('.menu_ul a').mouseenter(
function() {
$(this).siblings('span').animate({
'opacity' : 1
},500);
}
);
$('.menu_ul a').mouseleave(
function() {
$('.menu_ul span').animate({
'opacity' : 0
},500);
}
);
CSS
.menu_ul li {
padding:12px 0;
margin:0;
text-align:center;
display:block;
float:left;
color:#343434;
width:237px;
height:35px;
position:relative;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
}
.menu_ul a,
.menu_ul span{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.menu_ul a{
z-index:1;
line-height:55px;
display:block;
}
.menu_ul span{
opacity:0;
z-index:0;
display:block;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%);
}
Но позвольте быть реальным здесь - CSS3 лучше. (в зависимости от необходимой поддержки браузера)
HTML
<ul class="menu_ul" style="display:block;position:absolute">
<li id="menuitem1"><a href="?content=home">HOME</a></li>
<li id="menuitem2"><a href="?content=home">PLAYLIST</a></li>
<li id="menuitem3"><a href="?content=home">COMMUNITY</a></li>
<li id="menuitem4"><a href="?content=home">ABOUT US</a></li>
</ul>
CSS
.menu_ul li {
padding:0;
margin:0;
text-align:center;
display:block;
float:left;
width:237px;
}
.menu_ul a{
margin:0;
padding:12px 0;
display:block;
color:#343434;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.menu_ul a:hover{
color:#fff;
background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%);
}
.animate()
метод jQuery.animate()
не.animate()
цвета. Вы должны включить плагин цвета или JQuery UI.