JQuery не работает в Safari или Google Chrome - PullRequest
Новая
       30

JQuery не работает в Safari или Google Chrome

0 голосов
/ 26 апреля 2010

Я реализую эффект наведения jQuery для некоторых элементов списка. Он отлично работает во всех браузерах, кроме Safari и Google Chrome (Mac и ПК). По какой-то причине эффект наведения не работает на этих двух браузерах.

Вот код (он также использует плагин color_library.js ): 

$(document).ready(function(){
  var originalBG = $("#menu li#Q_01","#menu li#Q_03","#menu li#Q_05","#menu li#Q_07","#menu li#Q_09","#menu li#Q_11","#menu li#Q_11").css("background-color");    
  var originalBG1 = $("#menu li").css("color");
  var originalBG2 = $("#menu li#Q_02","#menu li#Q_04","#menu li#Q_06","#menu li#Q_08","#menu li#Q_10","#menu li#Q_12").css("background-color");

  var fadeColor = "#009FDD"; 
  var fadeColor1 = "#FFF";
  var fadeColor2 = "#623A10"; 

  $("#menu li#Q_01").hover( function () {
    $(this).animate( { backgroundColor:fadeColor2,color:fadeColor1}, 380 )
    },
    function () {
      $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
  }
  );

$("#menu li#Q_03").hover( function () {
    $(this).animate( { backgroundColor:fadeColor2,color:fadeColor1}, 380 )
    },
  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
  }
  );

$("#menu li#Q_05").hover( function () {
    $(this).animate( { backgroundColor:fadeColor2,color:fadeColor1}, 380 )
    },
  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
  }
  );

$("#menu li#Q_07").hover( function () {
    $(this).animate( { backgroundColor:fadeColor2,color:fadeColor1}, 380 )
    },
  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
  }
  );

$("#menu li#Q_09").hover( function () {
    $(this).animate( { backgroundColor:fadeColor2,color:fadeColor1}, 380 )
    },
  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
  }
  );

$("#menu li#Q_11").hover( function () {
    $(this).animate( { backgroundColor:fadeColor2,color:fadeColor1}, 380 )
    },
  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
  }
  );

$("#menu li#Q_13").hover( function () {
    $(this).animate( { backgroundColor:fadeColor2,color:fadeColor1}, 380 )
    },
  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
  }
  );



$("#menu li#Q_02").hover( function () {
    $(this).animate( { backgroundColor:fadeColor,color:fadeColor1}, 380 )
    },

  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
    }
   );

$("#menu li#Q_04").hover( function () {
    $(this).animate( { backgroundColor:fadeColor,color:fadeColor1}, 380 )
    },

  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
    }
   );

$("#menu li#Q_06").hover( function () {
    $(this).animate( { backgroundColor:fadeColor,color:fadeColor1}, 380 )
    },

  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
    }
   );

$("#menu li#Q_08").hover( function () {
    $(this).animate( { backgroundColor:fadeColor,color:fadeColor1}, 380 )
    },

  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
    }
   );

$("#menu li#Q_10").hover( function () {
    $(this).animate( { backgroundColor:fadeColor,color:fadeColor1}, 380 )
    },

  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
    }
   );

$("#menu li#Q_12").hover( function () {
    $(this).animate( { backgroundColor:fadeColor,color:fadeColor1}, 380 )
    },

  function () {
    $(this).animate( {color:"#666",backgroundColor:"#fff"}, 380 )
    }
   );
});

1 Ответ

1 голос
/ 26 апреля 2010

Поместите тег A в свои LI s. Стилизуйте и анимируйте ссылки, а не LI s.

...