Передвижение блоков при наведении курсора

категория: jQuery
Наткнулся на сайт, на котором все блоки ездят при наведении курсора мыши. Не скажу, что это очень впечатлило, и не советую сильно с этим перебарщивать. Но просто захотелось самому написать подобное, мало ли будет желание где-то применить. Советую почитать про анимацию jQuery (http://api.jquery.com/animate/). Перед тем, как приступить к написанию кода - не забываем подключить jQuery, не менее 1.7. К примеру, возьмем два блока:
<div>Block1</div>
<div>Block2</div>
Добавим какой-то стиль:
div { 
    background-color:#bca; 
    width:200px;
    height:1.1em;
    text-align:center;
    border:2px solid green;
    margin:2px;
    font-size:14px;
    opacity: 0.5;
}
В самом скрипте просто будем добавлять отступы margin и уменьшать прозрачность opacity:
$(document).ready(function(){
    $("div").on({
        mouseenter: function() {
            $(this).animate({ 
                "marginTop": "10px", 
                "marginLeft": "10px", 
                "marginBottom": "10px", 
                opacity: "1"
                }, 
		{duration:300, queue: false} 
	    )
	},
	mouseleave: function() {
	    $(this).animate({
		margin: "2px", 
		opacity: "0.5"
		}, 
		{duration:300, queue: false} 
            )
	}
    })
});
Пример можно посмотреть здесь: http://jsfiddle.net/MRjHA/ На сайте можно заставить двигаться все что угодно, но перед этим стоит подумать об уместности и о посетителях, которых возможно будет такой подход раздражать.


blog comments powered by Disqus