jquery - Jquery children() 不透明度アニメーション

Question

私の問題: 私は Jquery にかなり慣れていません'.visible'。アニメーションが完了したら、クラスを '.content' div に追加しようとしています。

各画像 div には、領域全体を埋めるように成長するカバーとしての画像が含まれています。

基本的に、各コンテンツ div には追加のテキスト コンテンツがあり、ユーザーが親要素をクリックしたときにのみ表示し、2 回目のクリックで親要素が元のサイズに戻るとフェードアウトします。

ブラウザ間の互換性を維持したいので、不透明度の値を設定するのではなく、このようにしています。

私の試みた解決策：私は遊んでいまし.children().addClass('visible')たが、運がありませんでした。私は初歩的な間違いを犯していると確信していますが、Stackoverflow や他のサイトを検索した後、この状況に対処する答えを見つけることができませんでした (私の側の検索が間違っている可能性があります)。

これまでの Jquery コード:

$(window).load(function(){
    $(".image").bind('click', function() {

        var that = $(this),
        offsets = that.position(),
        top = offsets.top,
        left = offsets.left,
        clone = that.clone(),
        parent = that.parent(),
        width = parent.width(),
        height = parent.height();

        clone.addClass('clone').appendTo(parent).css({
            'top': top,
            'left': left
        }).animate({
            'top': 0,
            'left': 0,
            'width': width,
            'height': height,
        }, 1000).click(function(){
            $(this).fadeOut().siblings().animate({
                'opacity': 1
            }, 1000);
        }).siblings().animate({
            'opacity': 0.1
        }, 1000);
    });
 });

うまくいけば、十分な情報を投稿できましたが、役立つ場合は、html と css も喜んで共有します。

関連する CSS クラスは次のとおりです。

  .content { 
      filter:alpha(opacity=0); 
      -moz-opacity:0; 
      -khtml-opacity:0; 
      opacity: 0; 
  }

  .visible { 
      filter:alpha(opacity=100); 
      -moz-opacity:1; 
      -khtml-opacity:1; 
      opacity: 1;
  }

  .wrap { 
      height: 725px; 
      width: 974px; 
      margin: 0 auto; 
      vertical-align: top; 
      position:  relative;
 }

 .image { 
      height: 233px; 
      width: 233px; 
      display:inline-block; 
      vertical-align: top;   
      margin: 0 11px 11px 0; 
      background-size: cover; 
      border: 1px solid #000000;
 }

問題の報告が不正確であった場合はお詫び申し上げます。また、ご協力いただきありがとうございます。