0

jQuery を使用してエフェクトを作成しようとしています。ヘッダーのページのイニシャルにマウスを合わせると、それらが含まれる div が展開され (jQuery animate を使用)、フルネームのテキストが各イニシャルからフェードインします。

いろいろ試してみましたが、これを行う最善の方法がわかりません。私は少し立ち往生しています。私は現在、私の名前「OW」のイニシャルを 2 つの別々の div に入れ、残りの名前を「wen」と「illiams」で構成することで、それを実現しようとしています。そのようです：

    <div class="initialF inlinediv">O</div>
    <div class="fullF inlinediv">wen</div>
    <div class="initialL inlinediv">W</div>
    <div class="fullL inlinediv">illiams</div>

jQuery の slideLeft と .fadeIn を使用してテキストを左からスライドさせ、フェードしてテキストがイニシャルから出てきているように見せればうまくいくと思いましたが、アニメーションがびくびくして 2 行目に移動している間にdiv はまだ拡張中でした。以下の jQuery を使用して、mouseIn/Out イベントを検出しています。

<script>
$(".brand").mouseenter(function() {
$('.brand').animate({width: '160px'});
$('.fullF').fadeIn("slow");
});

$(".brand").mouseout(function() {
$('.brand').animate({width: '36px'});
$('.fullF').fadeOut("slow");
});
</script>

私が試した代替手段は、 jquery.lettering.js を使用してそれを支援することでしたが、それにはいくつかの問題があるようです。私を正しい方向に導くための提案は役に立ちます。部分的に機能する例を含む私のサイトは次のとおりです。

http://192.241.203.146/
4

4 に答える 4

4

これは、jquery animate ではなく CSS トランジションを使用したものです: http://jsfiddle.net/S58Se/2/

<div class='branding'>    
    <span class='initial'>O</span><span class='hidden nameFull wen'>wen</span>
    <span class='initial'>W</span><span class='hidden nameFull illiams'>illiams</span>
</div>

span {
    display: inline-block;
    overflow: hidden;
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
}

.wen { width: 36px; }
.illiams { width: 160px; }

span.hidden {
    width: 0px;
    opacity: 0;
}

$('.branding').hover( 
    function() { $('.nameFull').removeClass('hidden'); },
    function() { $('.nameFull').addClass('hidden'); }
);

または、これで javascript を完全に廃止することもできます: http://jsfiddle.net/S58Se/3/ js を削除し、これらの css ステートメントを追加します。

.branding:hover .wen {
    width: 36px;
    opacity: 1;
}
.branding:hover .illiams {
    width: 160px;
    opacity: 1;
}

…だって、かっこいいと思うから。

于 2013-07-13T06:43:26.660 に答える
2

非表示の div のスタイルを設定し、position:absoluteそれらを表示する場合:

  1. 最初にそれらを「表示」して、それらを可視に設定します
  2. 次に、jQuery.position(); を使用して、それらを (「起動中」の div の隣に) 配置します。
  3. アニメーションを設定します。

本質的には、それらが「絶対的」であり、サンクイン/アウトおよび既存のフローの変更を回避する必要があります。position()要素を表示した後に呼び出す必要があり、アニメーションを開始するための適切な開始条件が必要です。

または<span>'、着信テキストに を使用したり、 として表示したりするinline-blockこともできます。HTH。

于 2013-07-13T05:01:02.497 に答える
2

これを行う良い方法は、渡すオブジェクトに別のプロパティを追加して、アニメーション メソッドへの呼び出しの使用を拡張することです。したがって、追加のメソッド (fadeIn) を呼び出す代わりに、すべてを一度に処理するだけです。急降下：

$('.brand').on({
  'mouseenter' : function () {
    $('.nameFull').stop().animate({
      'width' : '200px',
      'opacity' : '1'
    }, 500);
  },
  'mouseleave' : function () {
    $('.nameFull').stop().animate({
      'width' : '0',
      'opacity' : '0'
    }, 500);
  }
});

また、'hover' または 'mouseenter' と 'mouseleave' メソッドの代わりに 'on' を使用していることに気付くでしょう。jQuery の最近のバージョンでは、これらのメソッドは「on」を参照するだけなので、仲介者を取り除いてすべてを 1 か所で行う方がよいでしょう。

これがあなたのデザインにぴったり合っているかどうかはわかりませんが、実際のコードを示すために Codepen を作成しました: http://codepen.io/Tristan-zimmerman/pen/lnDGh

于 2013-07-13T06:15:52.483 に答える
1

あなたが探しているのは次のようなものだと思います: JSFiddle

html:

<div class="brand">
<div>O<span class="full">wen </span>W<span class="full">illiams</span></div>
</div>

jq:

$('.brand').hover(function(){
    $(this).stop().animate({width: '160px'},'slow',function(){
        $(this).children('div').children('.full').stop().fadeIn('slow');
    }); 
},function(){
    $(this).children('div').children('.full').stop().fadeOut('slow',function(){
        $(this).parent().parent().stop().animate({width: '36px'},'slow');
    });
});

CSS:

.full{
    display: none;
}

注: 特定のケースで発生する単純なバグがあり、私はそれに取り組んでいます。

よろしく、

于 2013-07-13T06:09:45.640 に答える