Jquery: механизм слайдера при наведении курсора - PullRequest
Новая
       0

Jquery: механизм слайдера при наведении курсора

2 голосов
/ 24 марта 2012

Я сейчас работаю со скользящими вкладками. Я реализую функцию наведения, чтобы вызвать сдвиг вкладки влево. Единственное, что вкладка действительно скользит, когда мышь наводит на нее, но она сразу закрывается. Я хотел бы, чтобы вкладка оставалась открытой, когда мышь наводит на нее курсор, и единственный способ закрыть вкладку - это нажать на начальный элемент div со стрелкой. Вот демонстрация моей работы: http://jsfiddle.net/eMsQr/6/

<script language="javascript">
    $(document).ready(function() {
  $("#arrow").hover(
    function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){
      $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
    }
  );
});
</script>

<html>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
    <div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>

    <div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>​
</html>

Ответы [ 2 ]

3 голосов
/ 24 марта 2012

Вы имеете в виду это?Используйте mouseenter - и click -event: 

$(document).ready(function() {
  $("#arrow")
    .mouseenter(function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    })
    .click(function(){
      $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
    });
});

Также см. этот пример .

1 голос
/ 24 марта 2012 
$(document).ready(function() {
  $("#arrow").hover(function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){});
});


$("#arrow").click(function(e){
    $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

Скрипка здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...