проблема с анимацией в jquery - PullRequest
Новая
       24

проблема с анимацией в jquery

0 голосов
/ 27 мая 2011

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

$(document).ready(initialize);

function initialize() {
    $(".imagePanel").hover(mouseOver,mouseOut);
}

function mouseOver() {
    $(this).animate({
        border:"2px"
        opacity: 0.25               
    }, 100);
}

function mouseOut() {
    $(this).animate({
        border: "2px",
        opacity: 0.25
    }, 100);
}

проблема - это первоечто граница свойства не устанавливается и, во-вторых, не имеет никакого представления о том, чтобы убрать непрозрачность в функции mouse out.Границы устанавливаются на элемент div.Благодарю.

Ответы [ 3 ]

3 голосов
/ 27 мая 2011

Не похоже, что вы можете установить границу в пределах animate, но вы можете сделать это с помощью css: 

$(document).ready(initialize);

function initialize() {
    $(".imagePanel").hover(mouseOver,mouseOut);
}

function mouseOver() {
    $(this).stop(true,true).animate({
        opacity: 0.25               
    }, 100, function() {
        $(this).css('border','2px solid black');
    });
}

function mouseOut() {
    $(this).stop(true,true).css('border','0 none').animate({
        opacity: 1
    }, 100);
}

См. Пример →

1 голос
/ 27 мая 2011 
$(document).ready(function(){

    $(".imagePanel").mouseover(function() {
         $(this).animate({
             borderTopColor:"#FF00FF",
             borderBottomColor:"#FF00FF",
             borderLeftColor:"#FF00FF",
             borderRightColor:"#FF00FF",
             opacity: 0.25               
         }, 500);
    });

   $(".imagePanel").mouseout(function() {
         $(this).animate({
             borderTopColor:"#FFFFFF",
              borderBottomColor:"#FFFFFF",
             borderLeftColor:"#FFFFFF",
              borderRightColor:"#FFFFFF",
             opacity: 1
         }, 500);
    });

});

Попробуйте это.

http://jsfiddle.net/n2ugx/8/

0 голосов
/ 27 мая 2011

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

Функции mouseOut () и mouseOver () идентичны.Ничего не произойдет.

jQuery animate () переводит элемент в указанное вами конечное состояние, откуда бы он ни начинался.Обе ваши функции одинаковы, поэтому ничего не меняется.

...