jQuery animate () справа налево на .hover - PullRequest
Новая
       22

jQuery animate () справа налево на .hover

1 голос
/ 21 февраля 2012

Я следую этому уроку по созданию анимации, подобной IKEA:

http://static.buildinternet.com/live-tutorials/interactive-picture/index.html

Проблема, с которой я столкнулся, заключается в том, что я хотел бы, чтобы информация расширялась справа налево, когда кто-то наводит курсор на изображение, а не слева направо.

Вот пример на jsfiddle: http://jsfiddle.net/NEHZU/1/

Это код в jsfiddle:

CSS: 

.more{ position:absolute; width:17px; height:17px; background:url('dim.png'); padding:2px; text-align:left; overflow:hidden; }

.more span{ position:absolute; left:32px; width:160px; padding:0px 0 0 0px; color:#000; font:bold 13px Lucida Grande, Arial, sans-serif;  }

#test{ top:50px; left:213px;}

HTML: 

<div class="more" id="test">

            <a href="http://www.google.com"><img src="http://buzport.com/wp-content/uploads/2011/07/land-phone-17x17px.gif"/></a>
            <span>random text</span>

        </div>​

JavaScript: 

$(".more").hover(function(){
                $(this).stop().animate({width: '225px' },200).css({'z-index' : '10'}); 
            }, function () {
                $(this).stop().animate({width: '17px', height: '17px' }, 200).css({'z-index' : '1'});
              });​

обновлен заголовок с указанием справа налево вместо слева направо

Ответы [ 2 ]

1 голос
/ 21 февраля 2012

Вы ищете это? 

$(".more").hover(function(){
    $(this).stop()
        .animate({
            width: '225px', 
            left: $(this).find('span').width() 
        }, 200)
        .css({ 'z-index' : '10' }); 
    }, function () {
    $(this).stop()
        .animate({
            width: '17px', 
            left: '213px', 
            height: '17px' 
    }, 200)
    .css({'z-index' : '1'});
});​

http://jsfiddle.net/NEHZU/38/

0 голосов
/ 21 февраля 2012 
$(".etc").hide();

$ (". More"). Hover (function () {

$(".etc").animate({
    "marginLeft": "-=80px"
}, 200);
$(".etc").show();

}, function () {

$(".etc").animate({
    "marginLeft": "+=80px"
}, 200);

$(".etc").hide();

});

Вы должны попробовать немного поиграть с моим css, я не рекомендую, извините за это:))

http://jsfiddle.net/zxJtu/

...