JQuery Animate не будет работать (даже образцы не работают)

0

Я пытаюсь получить простую анимацию 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%); 
}

Заранее спасибо.

  • 1
    .animate() метод jQuery .animate() не .animate() цвета. Вы должны включить плагин цвета или JQuery UI.
  • 0
    Ааа, понятно! Это сработало. Как мне заставить работать 'background-image'?
Показать ещё 2 комментария
Теги:
animation

1 ответ

0

Здесь один из способов изменения фонового градиента с изменением непрозрачности на вторичном элементе:

HTML

<ul class="menu_ul" style="display:block;position:absolute">
    <li id="menuitem1"><a href="?content=home">HOME</a><span>&nbsp;</span></li>
    <li id="menuitem2"><a href="?content=home">PLAYLIST</a><span>&nbsp;</span></li>
    <li id="menuitem3"><a href="?content=home">COMMUNITY</a><span>&nbsp;</span></li>
    <li id="menuitem4"><a href="?content=home">ABOUT US</a><span>&nbsp;</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%); 
}

jsFiddle Here


Но позвольте быть реальным здесь - 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%); 
}

jsFiddle.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню