0

ボックスにマウスを重ねるとhttp://www.findawayworld.com/のような効果が欲しいです。

これが私のコードです：

    jQuery('.category-image-block').mouseover(function() {
                jQuery(this).stop().fadeTo(400, 0.9);
                jQuery(this).children(".category-image-block     div").stop().fadeTo(400, 1);


        });
        jQuery('.category-image-block').mouseout(function() {
            jQuery(this).stop().fadeTo(400, 1.0);
            jQuery(this).children(".category-image-block div").hide();
        });

        jQuery(".category-image-block div").hide();

効果は出ているが、適切な効果が得られない。

クラス 'category-image-block' を持つ私の div には、画像とクラス 'contenthover' を持つ別の非表示の div が含まれています。非表示の div には、テキストを含む p タグがあります。上記のコードを使用すると、p タグにマウスを合わせると (1 秒未満) 点滅が発生します。効果はスムーズではありません。なにか提案を ？

4

3 に答える 3

1

これが私がそれを解決する方法です：

http://jsfiddle.net/6WSNq/8/

内部に div があると、これは絶対的なものでありcategory-image-block、この効果をより簡単に得ることができます。

よろしく

于 2012-07-28T12:52:33.607 に答える
0

私はこれをします：

$('.category-image-block').on('mouseenter mouseleave', function() {
    $(this).children(".category-hover-block").stop(true, true).fadeToggle(400);
});

フィドル

于 2012-07-28T13:04:15.540 に答える
0

これは、彼らが持っているもののほぼ正確な例です。前のコメントで指摘したように、css と要素がレイアウト内のどこにあるかに注意してください。

また、純粋なCSSソリューションについては、この回答の一番下までスクロールしてください（時間とスペースを節約できます）

HTML

<div id="parent" class="parent">
    <img id="background" class="background" src="http://www.findawayworld.com/scraps/icecream1-310x180.jpg">
    <div id="child" class="child">
        <h3>Some Title Here</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi posuere rutrum mollis. Vestibulum iaculis felis a felis interdum dictum. Duis quam ipsum, dictum in mollis nec, bibendum vel mauris.
        </p>
    </div>
</div>​

CSS

.parent {
    -moz-border-radius: .5em;
    border-radius: .5em;
    border: 3px groove #33FFFF;
    height: 180px;
    margin: 1em auto;
    position: relative;
    width: 310px;
}
.background {
    left: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;
}
.child {
    background: #fff;
    display: none;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.child h3 {
    font-size: 1.3em;
    text-align: center;
}
.child p {
    margin: 1em auto;
    padding: 0px 1em;
    text-align: justify;
}

jQuery

$(function() {
    $("#parent").hover(function(eIn) {
        $("#child").stop(true, true).fadeIn("slow");
    },
    function(eOut) {
        $("#child").stop(true, true).fadeOut("slow");
    });
});​

jsFiddle

でも

この正確な効果は css で完全に達成できるため、javascript の脚注は非常に小さくなります。まもなく CSS2 と CSS3 の例を上げようと思います。

純粋な CSS ソリューション

このソリューションには同じjsFiddleを使用しました（変更をベースとして設定しなかったため、変更22の下にあります）。そのため、以下の css に示されているように、1 行の例外 css があります。また、JavaScript をコメントアウトして、純粋な CSS ソリューションであり、IE との互換性さえあることを示しました。

CSS (*変更のみ*)

/* Below used for pure CSS solution */
.child {
    display: block !important; /* simply to override previous css without making change for looking at js version */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}
.parent:hover .child {
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* IE 8 */
    filter:alpha(opacity=100); /* IE 4, 5, 6 and 7 */
}
/* End Solution */

jsFiddle

于 2012-07-28T13:16:56.697 に答える