Jquery Сдвиньте элемент div влево при наведении курсора и при наведении мыши не работает, как следует? - PullRequest
Новая
       19

Jquery Сдвиньте элемент div влево при наведении курсора и при наведении мыши не работает, как следует?

0 голосов
/ 09 марта 2012

Привет, мне было интересно, смогу ли я получить помощь в завершении этого куска кода,

У меня есть div с переполнением: скрытый и поле слева от 82px, внутри него одна ссылка общего доступа, а затем список ul с тремя внешними ссылками,

Когда я наводю указатель мыши на ссылку общего доступа, она работает нормально, так как элемент div скользит слева направо к левому краю: 0.

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

Что мне в основном нужно, так это когда ссылка наведена, div сместится влево, позволяя появиться трем ссылкам, и пользователь может щелкнуть по ним, затем, когда пользователь отходит от div, он снова сворачивается.

Вот мой код jquery: 

$("#shareBtn").mouseover(function(){
        var $marginLefty = $(this).parent();
    $marginLefty.animate({
        marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 0 ? $marginLefty.outerWidth() : 0
    });
}).mouseout(function(){
        var $marginLefty = $(this).parent();
    $marginLefty.animate({
        marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 82 ? $marginLefty.outerWidth() : 82
    });
});

и HTML, чтобы пойти с ним: 

 <div id="player">


   <div id="share_feature">
      <div>
        <a id="shareBtn" href="#">share</a>
        <ul id="player_social">
            <li><a href="#">google</a></li>
            <li><a href="#" >facebook</a></li>
            <li><a href="#" >twitter</a></li>
        </ul>
    </div>
  </div>

любая помощь с этим будет принята с благодарностью, Спасибо

Ответы [ 2 ]

1 голос
/ 09 марта 2012

есть много примеров на эту тему.

используйте что-то вроде этого: 

$("#shareBtn").bind('mouseenter mouseleave',function(event){
    var $marginLefty = $(this).parent();
    if(event.type == 'mouseenter') {
        $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 0 ? $marginLefty.outerWidth() : 0
        });    
    } else if(event.type == 'mouseleave') {
        $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 82 ? $marginLefty.outerWidth() : 82
        });    
    } 
});

я не проверял это, но с этим вы экономите дополнительный поискдля $(this).parent() и он должен делать то, что вам нужно

1 голос
/ 09 марта 2012

Попробуйте это вместе с вашим кодом, который свернет div, когда вы выйдете из него. 

$("#share_feature").mouseleave(function(){
  $(this).animate({
      marginLeft: parseInt($(this).css('marginLeft'), 40) == 0 ? $marginLefty.outerWidth() : 0
  });
})
...