Если $ (element) hasClass, тогда .animate () не работает? - PullRequest
Новая
       31

Если $ (element) hasClass, тогда .animate () не работает?

1 голос
/ 02 декабря 2010

Я работаю над анимацией стрелки, когда элемент имеет класс «activeSlide», по некоторым причинам он не работает должным образом.Я не уверен, почему это так, может кто-нибудь немного рассказать о том, что я делаю неправильно? 

$(document).ready(function() {
 if($('#navitem-2').hasClass("activeSlide")){
  $("#navarro").animate({marginLeft:"220px"}, 500);
 };
});

Спасибо!

* Обновление *: Вот пример, где классы меняются по клику, но анимация не работает: http://jsfiddle.net/somewhereinsf/pn5sx/1/

Ответы [ 3 ]

1 голос
/ 02 декабря 2010 
$(document).ready(function()
{
    if($('#navitem-2 .activeSlide').length > 0)
    {
         $("#navarro").animate({marginLeft:"220px"}, 500);
    }
}

Это должно работать на 100% в условиях

  • #navitem-2 существует
  • класс activeSlide является потомком #navitem-2
  • #navarro существует.

если у вас есть консоль, такая как Google Chrom Developer Tools, вы можете добавить механизм регистрации в свой javascript 

$.fn.log = function()
{
    if(LoggingEnabled && console && console.log)
    {
        console.log(this);
    }
    return this;
}

и затем попробовать: 

LoggingEnabled  = true;
$(document).ready(function()
{
    var Check = $('#navitem-2 .activeSlide').log();
    if(Check.length > 0)
    {
         $("#navarro").log().animate({marginLeft:"220px"}, 500);
    }
}
LoggingEnabled = false;

и вы можете видеть, что появляется в консоли журнала.

0 голосов
/ 03 декабря 2010

Анимации запускаются только один раз при загрузке ... их нужно запускать при каждом нажатии.

Вот быстрый пример использования кода, который вы разместили. 

//Add/Remove Class based on click - in my project this is done automatically (using malsup's Cycle)
$("#navitem-1 a").click(function(i) {
    $("div").removeClass('activeSlide');
    $("#navitem-1").addClass('activeSlide');
    SlideGreenDot();
});
$("#navitem-2 a").click(function(i) {
    $("div").removeClass('activeSlide');
    $("#navitem-2").addClass('activeSlide');
    SlideGreenDot();
});
$("#navitem-3 a").click(function(i) {
    $("div").removeClass('activeSlide');
    $("#navitem-3").addClass('activeSlide');
    SlideGreenDot();
});

//Conditional Animate Functions
function SlideGreenDot() {
    if ($('#navitem-1').hasClass("activeSlide")) {
        $("#navarro").animate({
            marginLeft: "0px"
        }, 500);
    };
    if ($('#navitem-2').hasClass("activeSlide")) {
        $("#navarro").animate({
            marginLeft: "190px"
        }, 500);
    };
    if ($('#navitem-3').hasClass("activeSlide")) {
        $("#navarro").animate({
            marginLeft: "340px"
        }, 500);
    };
}

//Run the method to start
SlideGreenDot();

HTHS
Charles

0 голосов
/ 02 декабря 2010

Ваш код работает, просто убедитесь, что #navarrow выстроен так, что marginLeft будет иметь значение, т.е. position:absolute. 

<div id="navitem-2" class="activeSlide"></div>
<div id="navarro" 
    style="width:10px;height:10px;background-color:green;position:absolute;">
</div>
<script>
    $(document).ready(function() {
        if($('#navitem-2').hasClass("activeSlide")){
                $("#navarro").animate({marginLeft:"220px"}, 500);
        };
    });
</script>

Демо: http://jsfiddle.net/cameronjordan/uwf9y/

Обновлено на основе вашего комментария / примера:

Изменение и проверка класса, по-видимому, не служат какой-либо цели в этом примере, гораздо проще использовать прямые события и запускать анимацию напрямую.

http://jsfiddle.net/cameronjordan/pn5sx/3/

<div id="navitem-1" class="slideable"><a href="#">Slide 1</a></div>
<div id="navitem-2" class="slideable"><a href="#">Slide 2</a></div>
<div id="navitem-3" class="slideable"><a href="#">Slide 3</a></div>
<div id="navarro"></div>

<script>
var prevSlideable;
$('.slideable').live('click', function(){
    if(prevSlideable != this.id) {
        // do you need this activeSlide class anymore?
        if(prevSlideable) {
            $(prevSlideable).removeClass('activeSlide');
        }
        $(this).addClass('activeSlide');

        prevSlideable = this.id;
        $('#navarro').animate({
            marginLeft: this.offsetLeft + "px"
        }, 500);
    }
});
</script>

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

...