0

私は自分の体にdivを持っています

<div id="one" style="background-image: url(img/1.png)"></div>

イベントが発生すると、次のことを行う必要があります

if(dragLeft < 270 && dragTop < 230) { 
  $('#one').addClass('header_out');
} else {
  $('#one').removeClass('header_out').addClass('header_in');
}

フェード効果のために

.header_out {
    opacity: 0.2;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
 }

 .header_in {
 opacity: 1;
 transition: opacity .55s ease-in-out;
 -moz-transition: opacity .55s ease-in-out;
 -webkit-transition: opacity .55s ease-in-out;
 }

残念ながらIDは機能しません。不透明度を 0.2 にフェードしてから 1 に戻す 2 つのクラスがあります。

4

1 に答える 1

1

動作中のjsFiddleデモ

要素にトランジションを追加します#one:

#one {
    width: 400px;
    height: 400px;
    transition: opacity .55s ease-in-out;
    background: red;
}

.out { opacity: 0; }
.in { opacity: 1; }

そしてあなたのjQueryで：

// fade out
$('#one').addClass('out').removeClass('in');

// fade in
$('#one').addClass('in').removeClass('out');
于 2013-06-01T14:59:35.030 に答える