Как повторно использовать пользовательскую функцию в jQuery для применения нескольких свойств css?

Question

Супер простая концепция, но это дает мне проблемы ...

5 элементов div всего 1-й дивизион центрирован, z-индексирован спереди. Другие 4 divs - каждый 1/4 страницы. При зависании каждый применяет уникальное свойство css к первому div.

Here's what I currently have

Или вот код:

$(document).ready(function(){ 
    function point(a, b, c, d) { 
    $(".middle").css("transition", ".15s ease-in-out all"); 
    $(".middle").css("border-radius", a . "% " . b . "% " . c . "% " . d . "%"); 
    } 

    function unpoint() { 
    $(".middle").css("transition", ".15s ease-in-out all"); 
    $(".middle").css("border-radius", "50% 50% 50% 50%"); 
    } 

    $(".section-1") 
    .on("mouseenter", point(0, 50, 50, 50)) 
    .on("mouseleave", unpoint()); 
}); 

Спасибо за помощь!

Answer 1

Вы могли бы сделать небольшой плагин

(function($) { 
    function mouseenter(a, b, c, d) { 
    $(".middle", this).css({ 
     transition: ".15s ease-in-out all", 
     borderRadius: [a, b, c, d].map(function(side) { return side+"%"; }).join(" "); 
    }); 
    } 

    function mouseleave() { 
    $(".middle", this).css({ 
     transition: ".15s ease-in-out all", 
     borderRadius: "50%" 
    }); 
    } 

    $.fn.point = function(a, b, c, d) { 
    return this.each(function(idx, elem)) { 
     $(elem).hover(
     function() { mouseenter.call(this, a, b, c, d); }, 
     function() { mouseleave.call(this); } 
    ); 
    }); 
    }; 
})(jQuery); 

Затем вы можете использовать его как этот

$(document).ready(function() { 
    $(".section-1").point(0, 50, 50, 50); 
}); 

Answer 2

В моем первом взгляде я обнаружил некоторые проблемы с кодом ..

первый выпуск : в данной строке есть синтаксическая ошибка. она должна быть + вместо (точка)

$(".middle").css("border-radius", a + "% " + b + "% " + c + "% " + d + "%"); 

2-й выпуск:. Вы не присвоив функцию обратного вызова, но вы просто вызов этой функции. Правильный синтаксис должен быть таким ..

$(".section-1") 
    .on("mouseenter", point) 
    .on("mouseleave", unpoint);