5

これまでのところ、私はこのコードを持っています

http://jsfiddle.net/Nq79H/1/

ただし、テキストのみを表示したままにするために、画像をフェードアウトしたいと思います。JavaScriptを変更する必要がありますか、それとも新しいcss divを作成する必要がありますか？

$('.text').hide().removeClass('text').addClass('text-js');

$('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
});
4

6 に答える 6

5

...しかし、テキストのみを表示したままにするために、画像をフェードアウトしたいと考えています。

同様に要素に追加.fadeToggle()するだけです：img

$('img', this).fadeToggle();

JSFiddle の例。

于 2013-03-20T13:18:00.467 に答える
3

CSS3 移行ソリューションは次のとおりです。

jsフィドル

CSS

.thumb .text {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #999;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    -webkit-transition:opacity .5s ease;
    -moz-transition:opacity .5s ease;
    transition:opacity .5s ease;
    opacity:0;
}
.thumb:hover .text {
    opacity:1;
}

.thumb img {
    opacity:1;
    -webkit-transition:opacity .5s ease;
    -moz-transition:opacity .5s ease;
    transition:opacity .5s ease;
}
.thumb:hover img {
    opacity:0;
}

サポート

現在、CSS3 トランジションのサポートはかなり充実しており、すべての主要なブラウザー (Safari、Chrome、Opera、Firefox) の最新バージョンはすべてトランジションをサポートしています。一方、IE はバージョン 10 からのみサポートしています。トランジションは、何かがサポートしていないときにクラッシュしたり燃えたりしないという点で優れています。要素の不透明度は変更されますが、遷移はありません。

参考文献

于 2013-03-20T13:21:02.317 に答える
0

JSや追加のHTMLは必要ありません。

http://jsfiddle.net/Nq79H/11

.thumb img {
    -moz-transition: opacity .8s;
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
}
.thumb:hover img {
    opacity: 0;
}
于 2013-03-20T13:19:41.993 に答える
0

テキストをフェードインし、画像をフェードアウトしたい場合は、もう 1 行追加します。

$('.text').hide().removeClass('text').addClass('text-js');

$('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
    $(this).children("img").fadeToggle();
});
于 2013-03-20T13:18:34.300 に答える
0 
$(this).find('img').fadeToggle();
于 2013-03-20T13:18:57.637 に答える
0

これはあなたが探しているものですか？

$('.thumb').hover(function(){
$(this)
    .find('.text-js')
        .fadeToggle()
    .end()
    .find('img')
        .fadeToggle();
});

http://jsfiddle.net/Nq79H/4/

于 2013-03-20T13:19:06.113 に答える