jQuery animate поворот изображения

У меня есть панель навигации с подменю и стрелка, чтобы щелкнуть по ней, чтобы сбить подменю (уже используя jQuery slideToggle()), и я пытаюсь использовать jQueryRotate.js, чтобы повернуть стрелу медленно, с помощью меню ,jQuery animate поворот изображения

Итак ... стрелка, указывающая вверх, в меню втянута, и стрелка указывает вниз с отображением меню. Я попытался использовать jQuery animate() без успеха.

Вот моя скрипка:http://jsfiddle.net/mYQNL/2/

Первым и наиболее очевидным является проблема стрелка не вращается обратно направлен вверх, когда меню убирается.

Любая помощь была бы высоко оценена!

источник

2013-11-06 Adjit

Я обновил свой ответ с исправленной скрипкой. – Sebsemillia

@Sebsemillia Спасибо за это! Я имею в виду, что я не плохо с CSS и HTML, есть всего несколько вещей, которые всегда бросают меня за цикл. Итак, как '#posiNav a {display: block; position: relative;} 'достичь желаемого эффекта? Кроме того, с точки зрения пользователя, прямо сейчас у меня есть набор 'li' с' padding: 5px 0px; 'поэтому якорь не растягивается сверху вниз. Теперь, если я добавлю его в '#posiNav a', это так, но как вы думаете, должно быть какое-то пространство между' li ', которое не является частью якоря? – Adjit

@Sebsemillia готовый продукт: https://www.metsales.com/MetropolitanSales/microsite/posiflex/home.aspx? дайте мне знать свои мысли – Adjit

Попробуйте с этим:

if($(this).hasClass('rot')) { 
    $(this).removeClass('rot').rotate({ 
     duration: 200, 
     angle: 180, 
     animateTo:0 
    }); 
} else { 
    $(this).addClass('rot').rotate({ 
     duration: 200, 
     angle: 0, 
     animateTo:180}); 
};

jsFiddle

BTW: Я бы рекомендовал использовать CSS transform вместо библиотеки JQuery для поворота изображения.

jsFiddle with corrected HTML

Я бы порекомендовал вам изучить основы HTML и CSS, потому что без этого вы никогда не сможете создать сайт, который будет работать отлично и с хорошей производительностью во всех браузерах и устройствах.

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

источник

2013-11-06 20:16:00 Sebsemillia

Это отлично работает! В любом случае, чтобы оживить его так, что он вращается со скоростью, меню падает? – Adjit

@metsales: Я обновил свой ответ, просто поиграйте со временем, пока не получите желаемый эффект времени. – Sebsemillia

@Tip_Top за отзыв! Причина, по которой у меня была отдельная кнопка, заключается в том, что у меня будет «домашняя страница» для каждой из этих кнопок, где, если они нажмут на «li», она перейдет на главную страницу, тогда как если они нажмут на стрелку, они смогут выбрать из выпадающего меню. Он работает немного лучше, чем JSFiddle, из-за указателя мыши, но кроме того, что вся строка 'li' выводит выпадающее меню вниз, вы думаете, что добавление некоторого дополнения к стрелке поможет? – Adjit

$("#row-1").click(function(){ 
    value1 += delta1; 
    delta1 = -delta1; 
    $("#image1").rotate({ animateTo:value1}); 
});

Добавить строку-1 в качестве идентификатора столбца, в котором находится изображение, а затем добавить изображение в качестве идентификатора к изображению.

источник

2013-11-06 20:17:41

Вы также мог бы сделать это следующим образом:

var currAngle = $(this).getRotateAngle(); 
if(currAngle == 180){ 
     $(this).rotate(0); 
    } 
    else{ 
     $(this).rotate(180); 
    }

И иметь больший контроль над вращением, используйте:

var currAngle = $(this).getRotateAngle(); 
if(currAngle == 180){ 
    $(this).rotate({ 
     duration:1300, 
     angle:180, 
     animateTo:0 
    }); 
} 
else{ 
    $(this).rotate({ 
     duration: 1300, 
     angle:0, 
     animateTo: 180 
    }); 
}

источник

2013-11-06 20:39:22 Jorge

jQuery animate поворот изображения

ответ

Смежные вопросы