Свойство CSS margin-top: анимация -10px с Jquery влияет на следующие элементы div, как их исправить? - PullRequest
Новая
       27

Свойство CSS margin-top: анимация -10px с Jquery влияет на следующие элементы div, как их исправить?

0 голосов
/ 05 октября 2011

Я хочу сделать эффект наведения, чтобы отразить иконку, но иметь фиксированную тень ниже. Так что я использую Jquery с hover и анимирую маржу. что происходит, когда блок изображения перетаскивает тень, когда он меняет свой край Как я могу исправить тень в ее положении?

вот мой код 

<style>
#icons
{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
}
#icons li
{
float: left;
height: 170px;
padding: 10px 0px 0px 0px;
}
#icons li a.img_bounce
{
display: block;
border: 0px;
}

#icons li img.img_shadow
{
display: block;
border: 0px;

}


</style>

<script>
 jQuery(document).ready(function () {

jQuery("#icons a.img_bounce").hover(function(){
jQuery(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
},function(){
jQuery(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
});


});
</script>

<ul id="icons">
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>

</ul>

enter image description here

Я узнал, что, добавив к анимации высоту 

on hover
    jQuery(this).stop().animate({opacity: 0.75, marginTop: -10,height:138}, 400);
on hover out
    jQuery(this).stop().animate({opacity: 0.75, marginTop: -10,height:128}, 400);

это работает, но ... оригинальная высота как-то изменена ... это не оригинал изменяет исходное положение тени ... после одного зависания ...

Ответы [ 3 ]

1 голос
/ 05 октября 2011

Я думаю, что это может быть полезно для вас.

Сайт: http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/

Демонстрация: http://adrianpelletier.com/sandbox/jquery_hover_nav/

С другой стороны: это значок "ChromeFox""или что?

1 голос
/ 05 октября 2011

Очень быстрым решением для этого было бы добавить немного отступа / отступа к нижней части одновременно.Сейчас происходит то, что, поскольку вы перемещаете один элемент с помощью поля, другие элементы просто будут перемещаться вместе с ним, так как они относительно позиционированы к нему.

Если вы добавите дополнительный отступ /поле внизу (одно или другое), тогда теневое изображение должно оставаться в том же положении.

0 голосов
/ 05 октября 2011

Вы можете просто добавить position: relative к #icons li a.img_bounce, а затем анимировать свойство top вместо margin-top.

См .: http://jsfiddle.net/thirtydot/uexTM/

...