переменные javascript для отдельных элементов, переданные в отдельные анимации

Question

http://jsfiddle.net/motocomdigital/uTV5k/14/

Здравствуйте,

Я думал, что я был почти их с этой загадкой.

Смотрите мое jsfiddle живое демо.

Я написал сценарий jQuery для довольно простой анимации, но он не работает так, как мне нужно.

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

Изображение 1 - см. Ниже нормального состояния ...

Изображение 2 - Тогда посмотрите мое состояние при наведении ...

Заголовок и отрывок текста Lorum Ipsum являются динамическими - поэтому они будут переменной высоты, в приведенном выше примере это довольно длинный заголовок, обычно это максимум две / три строки. На странице будет около 9 полей, все с разными длинами заголовков, поэтому я пытаюсь анимировать определенные размеры относительно отдельного элемента.

См. Ниже мою разметку, которая делает поле:

<div class="home-mod">

    <div class="mod-center"><img src="http://tintation.com/wp-content/uploads/amazing-images-graphics/star-wars-robo-robot.jpg" alt="" /></div>

    <div class="mod-info"> <!-- this is the slider, slides up when .mod-info is hovered -->

        <a href="http://jsfiddle.net/" title="testings" class="mod-link"><span>//</span> Proin consectetur velit sed nibh mollis nec facilisis orci convallis</a>

        <div class="mod-excerpt">

            Get the latest news and updates on your mobile device <a href="http://jsfiddle.net/" title="testings" >read more</a>

        </div>

    </div>   

</div>

Тогда посмотрите мой сценарий ...

Который я прокомментировал каждое действие, объясняя, что я делаю.

    var moduleLink  = $("a.mod-link").innerHeight(),
    // I'm getting the dynamic height plus padding of a.modlink

    moduleInfo  = $("div.mod-info").height();
    // I'm getting the dynamic height of div.mod-info

$(".mod-info").css( "top" , "-" + moduleLink + "px" );
    // I'm adding css top position to the div.mod-info, this will make only the a.mod-link area visible

$("div.mod-info").hover(function() {
 // I'm selecting the div.mod-info box for a hover action

    $(this).animate({ top : "-" + moduleInfo + "px" });
    // Only this object will animate. I'm then animating to the specific var moduleInfo for this element

}, function() {

    $(this).animate({ top : "-" + moduleLink + "px" });
    // When un-hovering, it animates back to the top value of moduleLink height

});

$(".home-mod").click(function(){
// This is making the enitre .home-mod div a clickable div

    window.location=$(this).find("a.mod-link").attr("href");

    return false;         
});

Теперь даже я могу сказать, что мой скрипт грязный, лол, но может действительно помочь советом профессионала о том, как заставить мой скрипт работать как задумано, или сделать весь скрипт менее раздутым, и работать: -)

Действительно ценю ваше время, люди.

См. Мой jsfiddle здесь, с несколькими элементами для проверки.

Большое спасибо

http://jsfiddle.net/motocomdigital/uTV5k/14/

Answer 1

Попробуй мой: http://jsfiddle.net/uTV5k/12/

Все заработало

Произошла небольшая ошибка ... полный код:

$(function() {


    $('.home-mod').each(function() {
        var moduleLink = $(this).find('.mod-link').innerHeight();
        $(this).find('.mod-info').css("top", "-" + moduleLink + "px");
    });

    $("div.mod-info").hover(function() {

        var moduleInfo = $(this).height();


        $(this).animate({
            top: "-" + moduleInfo + "px"
        });

    }, function() {

        var moduleLink = $(this).find('.mod-link').innerHeight();

        $(this).animate({
            top: "-" + moduleLink + "px"
        });

    });

    $(".home-mod").click(function() {

        window.location = $(this).find("a.mod-link").attr("href");

        return false;
    });

});