jQuery and CSS positioning conflicts

I'm writing a small viewer for a few images. I'm having trouble and I'm not sure what the cause is, but my guess is it's the mixture of CSS and jQuery that goes on. The problems are: - The images twitch a little when others are animating. - After the first time animating the images move lower than their original positions The code might be a little messy because I had to change a bunch of things to get the fiddle working. My HTML markup:            
           
                           
           
                           
           
                           
           
                           
           
                           
           
                           
       
       


    ​ My CSS: #photos { display : block; position: relative; } .photo { border : 1px solid #808080; box-shadow: 0 0 10px 2px rgba( 0, 0, 0, 0.5 ); position : absolute; max-height: 250px; max-width : 250px; } .photo { display: block; } .photo:hover { transform: rotate( 0deg ) !important; -webkit-transform: rotate( 0deg ) !important; -moz-transform: rotate( 0deg ) !important; -ms-transform: rotate( 0deg ) !important; -o-transform: rotate( 0deg ) !important; z-index: 1; } .photo-image { display : block; max-height: 100%; max-width : 100%; } hr { border: 0; border-top: 1px dashed red; } ​ My JavaScript: SemiEllipse = function ( a, b, cx, cy ) { this.radiusA = a; this.radiusB = b; this.radiusASquared = a * a; this.radiusBSquared = b * b; this.centerX = cx || 0; this.centerY = cy || 0; } SemiEllipse.prototype = { getPoint: function ( x ) { x -= this.radiusA; var y = this.radiusB * Math.sqrt( 1 - ( ( x * x ) / this.radiusASquared ) ); return { x: x + this.centerX, y: y + this.centerY }; }, getAngle: function ( x ) { var angle = Math.PI/2 - Math.atan2( this.radiusB, x ); return angle; } } $( '#photos' ).each(function () { var $photogroup = $( this ); var $photos = $photogroup.find( '.photo' ); var count = $photos.length; var limitHeight = $photos.css( 'max-height' ); var maxHeight = 0; for ( var i = 0; i < count; ++i ) { var $photo = $photos.eq( i ); var h = $photo.height(); if ( h > maxHeight ) { maxHeight = h; } if ( maxHeight > limitHeight ) { maxHeight = limitHeight; break; } } $photogroup.height( 400 ); var bounds = { w : $photogroup.width(), h : $photogroup.height(), padW: $photogroup.innerWidth() - $photogroup.width(), padH: $photogroup.innerHeight() - $photogroup.height(), } var halfW = bounds.w / 2; var scale = halfW / ( count - 1 ); var sc = new SemiEllipse( halfW / 2, 100 ); // PHOTO POSITIONING for ( var i = 0; i < count; ++i ) { var $photo = $photos.eq( i ); var p = sc.getPoint( i * scale ); var theta = sc.getAngle( p.x ) / 10; $photo.css({ 'left' : p.x + sc.radiusA, 'bottom': p.y, 'transform': 'rotate( ' + theta + 'rad )', '-webkit-transform': 'rotate( ' + theta + 'rad )', '-mox-transform': 'rotate( ' + theta + 'rad )', '-ms-transform': 'rotate( ' + theta + 'rad )', '-o-transform': 'rotate( ' + theta + 'rad )', }); } // HOVER FUNCTIONS $photos.each(function () { $this = $( this ); var y = parseFloat( $this.css('bottom') ); $this.data('mouseOverBottom', y + 10) .data('mouseOutBottom', y - 10) .css({ 'transition': 'all .25s ease-in-out', '-webkit-transition': 'all .25s ease-in-out', '-moz-transition': 'all .25s ease-in-out', '-o-transition': 'all .25s ease-in-out' }); }).hover(function () { $this = $( this ); $this.css( 'bottom', $this.data( 'mouseOverBottom' ) ); }, function () { $this = $( this ); $this.css( 'bottom', $this.data( 'mouseOutBottom' ) ); }); }); ​ http://jsfiddle.net/rNnx4/16/ I'm not sure about the images moving lower, but I've dealt with the twitching before. I already know that `transform: translateZ(0)` will do the trick, but this seems to kill my rotations. The only way I can think of getting it working is by adding a `
` around every image with a class doing that, but I'm stubborn and don't want to add `
`s to all of my things. But I guess I'll suck it up if it's the only way.

以上就是jQuery and CSS positioning conflicts的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏