Как сделать анимацию jQuery ({bottom ... work

Question

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

Я создал jsfiddle здесь: http://jsfiddle.net/EFhVp/1/

По какой-то причине мой код работает нормально, как и ожидалось, в Firefox, но не в Chrome или jsfiddle.

Что происходит в Firefox (ожидается): скрытый текст падает (сверху), когда я наводю курсор мыши изатем поднимается вверх от мыши над контейнером

Что происходит в chrome и jfiddle: текст смещается вверх, а затем исчезает при выключенной мыши.

Я подозреваю, что при анимации происходит нечто неожиданноесвойство "bottom:", но я не могу понять это.

Answer 1

Использование свойства bottom было странным подходом. Я преобразовал ваш код для использования top вместо этого, и анимация работает кросс-браузерно: http://jsfiddle.net/EFhVp/2/

$(function() {
    $(".projectgrid .entry-content").hover(function() {
        $(".projecttags", this).animate({
            top: "0px"
        }, "slow");
    }, function() {
        $(".projecttags", this).animate({
            top: "-100%"
        }, "slow");
    }
    );
});​

Answer 2

     $('.projectgrid .entry-content').hover(
function(){
    $(this).stop().animate({marginTop:'-25px',}, 300);  
    },
    function(){
    $(this).stop().animate({marginTop:'0px',}, 1000);
    }
);

Попробуйте это.у меня это работает во всех браузерах