jquery動畫背景

我在使用jquery在鼠標懸停主div時更改子div的背景。jquery動畫背景

$('#bottom-a .module.responsive').hover(function() { 
    $('#bottom-a .responsive .mod-icon').css({ 
     "background-position": "left bottom" 
    }); 
}, function() { 
    $('#bottom-a .responsive .mod-icon').css({ 
     "background-position": "left top" 
    }); 
});

如何向此腳本添加動畫？感謝名單！

來源

2012-10-06 LifeIsShort

有你看着jQuery的動畫功能？ http://api.jquery.com/animate/ – Dan

是的，但不能把它放在一起，今天有點醉了，所以很難想：D – LifeIsShort

用'animate'替換'css' – Johan

你可以簡單地用CSS做沒有修改代碼：

#bottom-a .responsive .mod-icon { 
    background-image:url('imgurl.jpg'); 
    transition: background 2s; 
    -moz-transition: background 2s; /* Firefox 4 */ 
    -webkit-transition: background 2s; /* Safari and Chrome */ 
    -o-transition: background 2s; /* Opera */ 
}

來源

2012-10-06 19:38:22 obe6

它工作完美！謝謝！ – LifeIsShort

... CSS3增加了很多功能，現在經常可以獲得令人驚歎的效果，只有使用CSS和沒有Javascript – obe6

$('#bottom-a .module.responsive').hover(function() { 
    $('#bottom-a .responsive .mod-icon').animate({ 
     "background-position": "left bottom" 
    },1000); 
}, function() { 
    $('#bottom-a .responsive .mod-icon').animate({ 
     "background-position": "left top" 
    },1000); 
});

來源

2012-10-06 19:22:16 ygssoni

奇怪，但不起作用 – LifeIsShort

這個解決方案不需要jQuery UI嗎？ – 2012-10-06 19:28:45

jquery動畫背景

回答

相關問題