Question

我在悬停时写了fadein和fadeout效果，但是我再次编写代码我想知道我是否可以更改某些参数以便我只能使用它一劳永逸。

ids #crep，#sal和#frueh是链接

HTML

<div class="carta3">
  <h1 id="crepes2"></h1>
  <table id="crepes">
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
 </div>

<div class="carta2">
  <h1 id="salate2"></h1>
  <table id="salate">
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
 </div>

<div class="carta1">
  <h1 id="fruehstueck2"></h1>
  <table id="fruehstueck">
    <tr>
      <td></td>
      <td></td>
    </tr>
  </table>
 </div>

jquery代码

// fadeout fadein
    $("#crep, .carta3").hover(function (e) {
            e.preventDefault();
            $(".carta3 ,#crepes, #crepes2").stop().fadeIn();
            $("#salate, #salate2, #fruehstueck, #fruehstueck2").hide();   
         }, 
            function(){
            $(".carta3 ,#crepes, #crepes2").stop().fadeOut(50);
    });

// salate fadeout fadein
    $("#sal, .carta2").hover(function (e) {
            e.preventDefault();
            $(".carta2 ,#salate, #salate2").stop().fadeIn();   
            $("#fruehstueck,#fruehstueck2, #crepes, #crepes2").hide();
         }, 
            function(){
            $(".carta2 ,#salate, #salate2").stop().fadeOut(50);
    });




    $("#frueh, .carta1").hover(function (e) {
            e.preventDefault();
            $(".carta1 ,#fruehstueck, #fruehstueck2").stop().fadeIn();   
            $("#salate, #salate2, #crepes, #crepes2").hide();
         }, 
            function(){
            $(".carta1 ,#fruehstueck, #fruehstueck2").stop().fadeOut(50);
    });

Answer 1

你的方法很合理但很天真。当你发现自己像这样复制jQuery时，你应该写一个小插件。这真的很容易。

设计一个可以与Jquery重用的函数

1 个答案: