JQuery Array Вопрос

Question

Я довольно новичок в jQuery, и я пытаюсь создать крутой небольшой эффект меню, при котором, когда пользователь наводит курсор на элемент (#nav li), он будет анимироваться на большую ширину, что даст полное фоновое изображение. , Каждый из пунктов меню имеет идентификатор для явной установки ширины (поскольку они все различаются по размеру), поэтому # nav1 может быть 80px, тогда как # nav2 - 90px. Итак, я нашел это: Как получить все идентификаторы с помощью jQuery? , и это помогло мне создать массив, но теперь у меня возникают проблемы с выяснением, как вставить его в анимацию. Я подумал, что мне нужно сделать каждый или для цикла. Но, как я уже сказал, я довольно новичок в jQuery и у меня возникли некоторые проблемы.

Так что в основном я хотел бы, чтобы переменная chgWidth возвращала width () текущего зависшего #nav, а затем я бы подключил эту переменную к анимации, за исключением того, что я добавил бы, например, 30px, или при выключении зависания я бы вычел 30px.

Есть идеи? Вот мой текущий код ...

$(function(){ 
var chgWidth = $("#nav [id]").map(function(id) {
       return this.id;
       });

       $.each(chgWidth,function(n,value){
        $('#nav li').hover(function() {
            $(this).stop(0,1).animate({"width" : chgWidth+"px" });
        },
        function(){
            $(this).stop(0,1).animate({ "width" : chgWidth+"px" });
        });

});

Пример HTML

<div id="menu">
    <ul id="nav">
        <li id="nav1"><a alt="" href="#">home</a></li>
        <li id="nav2"><a alt="" href="#">about us</a></li>
        <li id="nav3"><a alt="" href="#">weddings & events</a></li>
        <li id="nav4"><a alt="" href="#">gallery</a></li>
        <li id="nav5"><a alt="" href="#">accolades</a></li>
        <li id="nav6"><a alt="" href="#">blog</a></li>
        <li id="nav7"><a alt="" href="#">contact us</a></li>
    </ul>
</div>

Пример CSS:

#menu { width: 100%; overflow: hidden; padding:0px 0px; background: #ffc4a0;}
#nav { position: relative; left: 50%; float: left;}
#nav li { position: relative; right: 50%; float: left; padding: 0 5px; margin: 0 5px; overflow:hidden; }
#nav1 { width:55px; }
#nav2 { width:80px; }
#nav3 { width:175px; }
#nav4 { width:60px; }
#nav5 { width:85px; }
#nav6 { width:40px; }
#nav7 { width:100px; }
#nav li a { color: #ffffff; text-decoration: none; font: bold 16px Verdana, Arial, Helvetica, sans-serif; }

Исходя из полученного ответа, это то, что я в итоге сделал, и, похоже, работает хорошо (Спасибо Джоэлу и Крдлузни):

$(function(){
    $("#nav [id]").each(function(){
        $(this).hover(function() {
            $(this).stop(0,1).animate({"width" : "+=30" });
        },
        function(){
            $(this).stop(0,1).animate({ "width" : "-=30" });
        });
    });
});

Answer 1

jQuery с недавнего времени принимает + = подобный синтаксис для ширины и других числовых значений в animate. Смотрите второй последний абзац в обзоре (а также примеры) здесь: http://docs.jquery.com/Effects/animate#paramsdurationeasingcallback

Answer 2

На самом деле вам не нужно получать идентификаторы в массиве, так как вам нужно назначить анимацию каждому элементу в nav, который имеет идентификатор.

Вместо сопоставления идентификаторов с вашей переменной chgWidth используйте каждый для перебора коллекции элементов и устанавливайте каждый из них по отдельности.

$(function(){ 
    $("#nav [id]").each(function(){
        $(this).hover(function() {
            $(this).stop(0,1).animate({"width" : this.id+"px" });
        },
        function(){
            $(this).stop(0,1).animate({ "width" : this.id+"px" });
        });
    });
});

Когда вы используете each для перебора коллекции элементов, контекст this устанавливается на текущий итерационный элемент.

Answer 3

Не каждая функция требуется! Если селектор возвращает несколько элементов, все элементов получают функцию, связанную с ними.

Это почти правильно:

$("li #nav").hover(
    function()
    {
        $(this).stop(0,1).animate({"width" : this.width()+30 });
        //save original width somehow
    },
    function()
    {
        $(this).stop(0,1).animate({ "width" : this.width()-30 });
        //retrieve original width
    });
);

Вам просто нужно как-то сохранить ширину. Возможно, их можно прочитать из CSS.