Блог

Я использую эффект jquery fadeTo для некоторых всплывающих подсказок поверх таблицы с множеством изображений.

Это работает отлично, за исключением одной детали. Когда я перемещаю мышь между двумя изображениями (которые соприкасаются), возникает короткое «мерцание», поскольку оно переключается с всплывающей подсказки первого изображения на второе.

Я не могу придумать способ остановить это. есть ли?

вот javascript, который я использую для всплывающей подсказки, которая использует qtip.

    $('.tipper').each(function()
   {
      $(this).qtip({
         content: $(this).attr('tooltip'), // Use the tooltip attribute of the element for the content
         position: {target: 'mouse', adjust: {x: 20 }},
         show: { effect: function() { $(this).fadeTo(300, 0.9);}, length:0},
         hide: { effect: 'none', length:0, delay:0 },
         style: { border: { width: 2, radius: 0 , color: '#fff'} ,width: 200,  name: 'light', fontFamily: 'Arial', 'font-size': '12px', 'letter-spacing': 1, lineHeight:1.6, textAlign:'center', textTransform:'uppercase', fontWeight:'bold'},
      });
   });
  

Я не уверен на 100%, но, возможно, это сработало бы лучше:

 $('.tipper').qtip({
    content: $(this).attr('tooltip'), 
    // Use the tooltip attribute of the element for the content
    position: {target: 'mouse', adjust: {x: 20 }},
    show: { effect: function() { $(this).fadeTo(300, 0.9);}, length:0},
    hide: { effect: 'none', length:0, delay:0 },
    style: { border: { width: 2, radius: 0 , color: '#fff'} ,
             width: 200,  
             name: 'light', 
             fontFamily: 'Arial', 'font-size': '12px', 'letter-spacing': 1,
             lineHeight:1.6, 
             textAlign:'center', 
             textTransform:'uppercase', 
             fontWeight:'bold' },
});