jquery скользит и исчезает при наведении курсора мыши с эффектом смягчения

Я ищу сценарий jquery для реализации эффекта легкости входа и выхода с помощью hide/show div, который реализован на этом сайте< /а>.

Вот мой скрипт на mouseover():

$("#box0").mouseover(function () {
    $("#lSection2").fadeIn(100);    
    $("#boxContent0").fadeIn(100);
});   
$('#boxContent0').mouseout(function() {
    $("#boxContent0").fadeOut(100);     
    $("#lSection2").fadeOut(100);
});

CSS:

.AdBox {
    width: 300px;
    height: 180px;
    border: 6px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    float: left;
    margin-right: 10px;
    margin-left: 10px;
}

.AdBoxl {
    width: 300px;
    height: 180px;
    border: 6px solid #666;
    float: right;
}

.boxContent div {
    width: 180px;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    height: 120px;
    border: 4px solid #fff;
    float: left;
    margin-right: 10px;
    margin-left: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background-color: #80634A;
}

#lSection2 {
    height: 120px;
    width: 100%;
    position: relative;
    top: 10px;
    padding-left: auto;
    padding-right: auto;
}

.boxContent {
    width: 970px;
    background-image: url(../images/gridtile.png);
    height: 150px;
    padding-top: 15px;
}

HTML:

mouse over or click to view details

Win Big
- Ipad
- Holiday
- 1 Year Spa Treatments

не работает, пожалуйста, помогите.


person Eno Bassey    schedule 14.11.2011    source источник


Ответы (1)


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

$.easing.easeOutCubic = function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
}

$("#box0").mouseover(function () {
    $("#lSection2").fadeIn(100, 'easeOutCubic');    
    $("#boxContent0").fadeIn(100, 'easeOutCubic');
});   
$('#boxContent0').mouseout(function() {
    $("#boxContent0").fadeOut(100, 'easeOutCubic');     
    $("#lSection2").fadeOut(100, 'easeOutCubic');
});

Смотрите этот ответ для более подробной информации...

jQuery.easing - easyOutCubic - акцент на простоте

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

http://jqueryui.com/demos/effect/easing.html

Это соответствующие функции. Просто выберите и используйте функции, относящиеся к вашему проекту...

swing: function (x, t, b, c, d) {
    return $.easing[$.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
    return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
    return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
    return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
    return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
    return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
    return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
    return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
    return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
    return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
    return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
    return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
    return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
    if (t==0) return b;
    if (t==d) return b+c;
    if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
    return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
    return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
    return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
    if ((t/=d) < (1/2.75)) {
        return c*(7.5625*t*t) + b;
    } else if (t < (2/2.75)) {
        return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    } else if (t < (2.5/2.75)) {
        return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    } else {
        return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    }
},
easeInOutBounce: function (x, t, b, c, d) {
    if (t < d/2) return $.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
    return $.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}

Примечания:

Ваш код использует mouseover и mouseout, что может привести к ошибочному поведению из-за того, как эти события запускаются. mouseover сработает несколько раз, пока указатель мыши находится над элементом. mouseenter и mouseleave намного стабильнее. Вы даже можете использовать .hover(), который автоматически объединяет .mouseenter() и .mouseleave() в один метод.

И продолжительность вашей анимации 100 составляет всего одну десятую секунды. Это слишком быстро, чтобы можно было увидеть какой-либо эффект смягчения.

person Sparky    schedule 14.11.2011
comment
может быть, это мой код, потому что смягчение, кажется, не работает, и то же самое для скрытия / показа div, что-то вроде ошибочного ... пожалуйста, найдите html и css выше - person Eno Bassey; 14.11.2011
comment
@EnoBassey, в общем, mouseover и mouseout ошибочны из-за того, как их запускает мышь. В вашем первоначальном вопросе об этом не упоминалось, иначе я бы предложил вместо этого использовать mouseenter и mouseleave. (.hover() работает даже лучше.) Можете ли вы опубликовать один пример в jsFiddle, чтобы мы могли работать над ним кратко? - person Sparky; 14.11.2011
comment
@EnoBassey, к тому же ваша продолжительность составляет всего одну десятую секунды, вы никогда не заметите облегчения с такой быстрой анимацией. - person Sparky; 14.11.2011
comment
я увеличил время до 1000, пожалуйста, посмотрите на приведенный выше код, как его можно преобразовать, чтобы выскользнуть в сторону при наведении или щелчке, предпочтительно по щелчку. возможно я задал неправильный вопрос. но я намереваюсь, чтобы div показывал скольжение в сторону в поле зрения.... - person Eno Bassey; 14.11.2011
comment
@EnoBassey, вы опубликовали простой вопрос о функциях Easing, на который я вам подробно ответил. Ваша текущая проблема не имеет ничего общего с Easing. Я не могу легко преобразовать ваш код mouseover/mouseout в код hover(), поскольку вы запускаете каждый из них с двумя совершенно разными селекторами. Как правило, вы срабатываете при входе/выходе из одного и того же элемента. Вы можете заменить mouseover на mouseenter и заменить mouseout на mouseleave и посмотреть, поможет ли это. - person Sparky; 14.11.2011