Question

有谁能告诉我如何调整这个jQuery的高亮方法（见下文）来突出显示任何带有渐变背景而不是纯色背景的div？

$('#myPanel').effect('highlight', {
    color: '#F08F907'
}, 700);

或任何其他方式来实现它。

Answer 1

在css中创建一个类，只使用.addClass()方法

Answer 2

尝试使用纯css

#gradient {
    height: 200px;
    background: -webkit-linear-gradient(#fe8989, #fedc89); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fe8989, #fedc89); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fe8989, #fedc89); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fe8989, #fedc89); /* Standard syntax (must be last) */
}

#gradient1 {
    height: 200px;
    background: -webkit-linear-gradient(#fe8989, #fedc89, #fe8989); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fe8989, #fedc89, #fe8989); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fe8989, #fedc89, #fe8989); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fe8989, #fedc89, #fe8989); /* Standard syntax (must be last) */
}

<div id="gradient"></div>
<p></p>
<div id="gradient1"></div>

更多详情请参阅链接http://www.w3schools.com/css/css3_gradients.asp

Answer 3

至于＆＃34;突出显示＆＃34;担心你只能给出纯色。但是您的要求可以通过以下代码段实现。

JS

<div class="target" style="background: #293f50;height: 200px;"></div>
 <button id="button"> Highlight </button>

脚本

<script type="text/javascript">
    $(document).ready(function() {
        //do button click
        $("#button").click(function() {
            //setting linear gradient for the div element
            $(".target").css("background", "linear-gradient(to right, #f6f1d3, #648880, #293f50)");

            //highlighting effect 
            for (i = 0; i < 3; i++) {
                $(".target").fadeTo('slow', 0.5).fadeTo('slow', 1.0);
            }
            //setting the normal color after highlighting 
            setTimeout(function() {
                $(".target").css("background", "#293f50");
            }, 3500);

        });
    });
</script>

如果有帮助，请告诉我

谢谢，

如何使用渐变背景而不是彩色背景突出显示任何div

3 个答案: