jquery image div center不会用jquery show hide功能

你好朋友我有一个问题，我的JQuery的代码。我用jQuery代码使用show hide div和图像居中的div。但是，当我只使用图像居中的jquery代码图像将在div中居中。然后当我添加show hide jquery函数图像居中功能不工作。jquery image div center不会用jquery show hide功能

这是工作演示仅仅只有居中的图像JQuery代码：

Demo

，这是不以show/hide DIV工作图像居中的div：

Demo2

这是我的代码show/hide div和图像居中div代码：

$('.imgs_w img').load(function() { 
    var image = $(this), 
     height = image.height(), 
     width = image.width(); 

    if (width > height) { 
     image.addClass('height'); 
     var middle = 0 - (image.width() - image.closest('.imgs_w').width())/2; 
     image.css('margin-left', middle + 'px'); 
    } else { 
     var middle = 0 - (image.height() - image.closest('.imgs_w').height())/2; 
     image.css('margin-top', middle + 'px'); 
    } 
}); 
$(function(){ 
    $('div.slidingDiv').hide(); 
    // Watch for clicks on the "slide" link. 
    $('div.ok').click(function() { 
     // When clicked, toggle the "view" div. 
     $('div.slidingDiv').slideToggle(400); 
     return false; 
    }); 
    });

我需要在我的代码中？任何人都可以帮助我？

来源

2014-07-03 Selahattin

隐藏时，.imgs_w将具有0维...在图像加载时，图像的父容器（.imgs_w）的维度为0，所以js计算将是错误的 –

您今天也会提出关于相同图像居中的另一个问题人们告诉你不要使用JS中心，但CSS –

@ florin.prisecariu但它的工作demo1 – Selahattin

http://jsfiddle.net/zK7h3/1/

把.slidingDiv可见了页面浏览的地方，例如left: -9999px;

.slidingDiv { 
    height:150px; 
    background-color: #99CCFF; 
    padding:20px; 
    margin-top:5px; 
    border-bottom:5px solid #3399FF; 
    width: 50%; 
    position:absolute; 
    left: -9999px; 
}

图像负载

，如果搬回考虑和应用的hide（）：

$('div.slidingDiv').css('left', 0); 
$('div.slidingDiv').hide();

这样divs将有图像加载尺寸和js作物将工作

来源

2014-07-03 12:56:34

是的，这很好，但它只适用于一个图像。您可以复制并粘贴'slidingDiv'内容剪裁功能仅处理第一张图像。像这样：[link]（http://jsfiddle.net/mustafaozturk74/csg8u/） – Selahattin

jquery image div center不会用jquery show hide功能

回答

相关问题