Следующий шаг к эффективному jQuery ...?

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(). Документация для 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