Question

我正在使用以下代码进行翻转效果，似乎工作正常！

我感兴趣的是以模块化的方式将其带入下一步。我的意思是，我不是要规定每一种可能性，而是如何开始制作我认为是插件的东西？

非常感谢！

$(document).ready(function() {

    $('#damart_490').hide();
    $('#simply_490').hide();

    $('.damart_link').hover(
        function() {
            $('#damart_490').show('blind',250);
                    },
        function() {
            $('#damart_490').hide('blind',250);
    });

    $('.simply_link').hover(
        function() {
            $('#simply_490').show('blind',250);
                    },
        function() {
            $('#simply_490').hide('blind',250);
    });

});

更新
很抱歉，如果这很简单，但我如何将它变成一个单独的文件插件并引用它？目前我有一个名为 rollover.js 的文件，其中包含...

function hover_link(link, element)
    {
        $(element).hide();

        $(link).hover(
            function() {
                $(element).show('blind',250);
            },
            function() {
                $(element).hide('blind',250);
        });
    }

这在我的页面中......

<script src="js/rollover.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

$hover_link('.damart_link', '#damart_490');
$hover_link('.simply_link', '#simply_490');

});

</script>

我只是缺少一些语法？！感谢您！

Answer 1

下一步是通过编写函数来减少重复：

function hover_link(link, element)
{
    $(element).hide();

    $(link).hover(
        function() {
            $(element).show('blind',250);
        },
        function() {
            $(element).hide('blind',250);
    });
}

hover_link('.damart_link', '#damart_490');
hover_link('.simply_link', '#simply_490');

Answer 2

您调用jquery show()函数的方式似乎存在问题。 documentation for show()表示一旦效果完成，它将只接受一个持续时间和一个可选的回调函数。

.show( duration, [ callback ] )

我看不到你曾经使用过的'盲目'效果风格的支持。也许我没有你正在运行的所有代码。上面显示的示例为我崩溃，因为250是一个整数而不是有效的函数。

至于使该函数成为jQuery插件的选项，我已经构建了这个：

$.fn.hover_link = function(target){

    //hide the target that will be toggled and store a reference to it
    $target = $(target).hide();     

    $(this).hover(
        function(){
            $(target).show(250);
        },

        function(){
            $(target).hide(250);
        }
    )

    //support jQuery chaining
    return this;
}

你可以像这样使用它：

HTML

<a href="#" class="trigger">The trigger</a>
<div class="targetElement">The target</div>

的JavaScript

$('.trigger').hover_link('.targetElement')

您可以在他们的网站上阅读有关jquery插件的优秀教程：http://docs.jquery.com/Plugins/Authoring

Answer 3

您可以尝试使用JQuery UI中的按钮小部件

JQuery UI

迈向高效jQuery的下一步......？

3 个答案: