Как добавить класс и удалить класс с исчезновением через jQuery?

Я пытаюсь превратить одно изображение в другое. Я попробовал маршрут CSS, сделав верхнее изображение прозрачным при наведении, но в моем случае это не сработает. В моем случае при наведении я пытаюсь превратить свой логотип в свой логотип со свечением. Логотипы не идеальной формы, поэтому расположение двух изображений друг над другом излишне, поскольку пользователь может видеть изображение «поверх», то есть светящийся логотип, не наводя на него курсор.

Я нашел jQuery addClass и removeClass и подумал, что это сработает. Пока это так, за исключением того, что исчезновение не происходит. Вместо этого он просто сразу переключается на изображение при наведении курсора.
Вот скрипт моего кода, за исключением того, что мой логотип был заменен яблоком, а верхний логотип заменен апельсином, поскольку изображения моего логотипа хранятся локально.

JavaScript, который у меня есть в Fiddle, таков:

$(document).ready(function() {
    $('img#logo').hover(
   function(){ $(this).stop(true).addClass('over', 500) },
   function(){ $(this).stop(true).removeClass('over', 500) });
});

И вот мой HTML:

<img id="logo" class="top" width="256" height="256" />

И мой CSS:

img.top {
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
}

img.over {
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
}

Мысли? Спасибо!


javascript jquery css addclass removeclass
person Ben    schedule 06.02.2014    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Попробуйте использовать переход

#logo{
    transition: background-image 2s;
    -moz-transition: background-image 2s;
    -webkit-transition: background-image 2s;
}

Демонстрация: Fiddle

Поскольку переход фонового изображения на данный момент поддерживается только в Chrome, попробуйте fadeOut()

<div id="logo" class="top" />

тогда

#logo {
    width:256px;
    height:256px;
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
}
#logo.over {
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
}

а также

$(document).ready(function () {
    $('#logo').hover(function () {
        $(this).stop(true, false).fadeTo(500, .1, function () {
            $(this).addClass('over').fadeTo(500, 1)
        })
    }, function () {
        $(this).stop(true, false).fadeTo(500, .1, function () {
            $(this).removeClass('over').fadeTo(500, 1)
        })
    });
});

Демонстрация: Fiddle

person Arun P Johny    schedule 06.02.2014
comment
Это прекрасно работает в Chrome и Opera, но по какой-то причине в Firefox нет никаких признаков изображения. Как будто тега изображения даже нет. - person Ben; 06.02.2014
comment
Я исправил эту проблему, изменив тег img на тег div, но Firefox по-прежнему не исчезает. Chrome и Opera делают это, но Firefox просто привязывается к изображению div#logo:hover. - person Ben; 06.02.2014
comment
stackoverflow .com/questions/10354742/ - person Arun P Johny; 06.02.2014
comment
@Бен, так что нам нужно найти другой выход - person Arun P Johny; 06.02.2014
comment
Вот почему я прибегнул к jQuery, потому что transition не работал с Firefox: P - person Ben; 06.02.2014
comment
давайте продолжим это обсуждение в чате - person Arun P Johny; 06.02.2014

arrow_upward
0
arrow_downward

Поскольку переход css, похоже, не работает для фоновых изображений в Firefox. Вы можете придерживаться другого подхода. Чистый html css подход.

HTML

<div id="logo">
  <img id="logo-img1" src="http://imgsrc">
  <img id="logo-img2" src="http://imgsrc">
</div>

CSS

#logo{
    position:relative; //not required if you already have given any position css
}
#logo img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity  .25s ease-in-out;
    -webkit-transition: opacity  .25s ease-in-out;
}

#logo-img1{
        opacity:1;  
    }

#logo-img2{
        opacity:0;
    }

#logo:hover #logo-img1{
      opacity:0;    
    }

#logo:hover #logo-img2{
      opacity:1;    
    }
person Sudhanshu Yadav    schedule 06.02.2014

arrow_upward
0
arrow_downward

Вам нужно использовать тег div вместо тега img, а затем вам нужно использовать переход CSS:

HTML:

<div class="logo"></div>

CSS:

.logo {
    background-image: url('https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg');
    transition: background-image .25s ease-in-out;
    -moz-transition: background-image .25s ease-in-out;
    -webkit-transition: background-image .25s ease-in-out;
    height: 256px;
    width: 256px;
}

.logo:hover {
    background-image: url('http://icons.iconarchive.com/icons/gcds/chinese-new-year/256/orange-icon.png');
}

Примечание. По какой-то причине переход не работает в Firefox.

person Sumner Evans    schedule 06.02.2014

arrow_upward
0
arrow_downward

http://jsfiddle.net/8tx36/4/

Пожалуйста, взгляните на пример с css3

transition: background 1s linear;
person justtry    schedule 24.08.2015