I am trying to create a jquery plugin that zoom the background image of a div when its hovered. However, i'm having a very strange glitch. It works fine and smooth, but when the div is clicked, the CSS3 transition starts to freeze. I've made a codepen example.
http://codepen.io/maxjf1/pen/rLKOPb
EDIT: I tryed the first Answer but it didn't work. I've changed de code
and the codepen example for better demonstration.
var smooth = 'all 200ms ease-out';
$("[up-background-zoom]").hover(function() {
debug = true;
$(this).css({
'background-size': 'inherit',
'cursor': 'zoom-in',
'border': '1px solid rgba(0, 0, 0, 0.15)',
'box-sizing': 'border-box',
'transition': smooth
});
}, function() {
$(this).css({
'background-size': '',
'background-position': '',
'cursor': '',
'border': '',
'box-sizing': '',
'transition': ''
});
});
$("[up-background-zoom]").mousemove(function(e) {
var parentOffset = $(this).parent().offset();
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
var divw = $(this).innerWidth();
var divh = $(this).innerHeight();
var posX = ((100 / divw) * relX).toFixed(3);
var posY = ((100 / divh) * relY).toFixed(3);
if (debug) $(this).html('<pre>' + posX + '%<br>' + posY + '%</pre>');
$(this).css({
'background-position': posX + '% ' + posY + '%',
});
});
I don't know what is wrong, any help apreciated
http://codepen.io/anon/pen/pbKgAz
Don't call mouse events inside mouse events, that'll mess things up. Use separate handlers instead.
var debug = true,
hovered = false,
smooth = 'all 0.1s ease-out',
el = $("[up-background-zoom]");
el.mousemove(function(e) {
var $this = $(this),
parentOffset = $this.offset(),
relX = e.pageX - parentOffset.left,
relY = e.pageY - parentOffset.top,
divw = $this.innerWidth(),
divh = $this.innerHeight(),
posX = ((100 / divw) * relX).toFixed(1),
posY = ((100 / divh) * relY).toFixed(1);
if (debug) $this.html('<pre>' + posX + '%<br>' + posY + '%</pre>');
$this.css({
'background-position': posX + '% ' + posY + '%',
});
})
el.on('click', function(e) {
if (hovered) {
console.log(this);
e.preventDefault();
}
});
el.hover(function() {
$(this).css({
'background-size': 'inherit',
'cursor': 'zoom-in',
'border': '1px solid rgba(0, 0, 0, 0.15)',
'box-sizing': 'border-box',
'transition': smooth
});
hovered = true;
}, function() {
$(this).css({
'background-size': '',
'background-position': '',
'cursor': '',
'border': '',
'box-sizing': '',
'transition': ''
});
hovered = false;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.