Question

我有一个奇怪的问题，我在jQuery写了一个滑块，一切似乎都很好。但是当我在Firefox中运行它时，文本会在完成动画功能时消失。

似乎<h2>标签获得了我给它的上边距的两倍。有人知道这里出了什么问题吗？或者有一个小黑客呢？

Answer 1

试试这个 解决方案 - 只是不要使用保证金来移动图片，而是使用＆＃34; Left＆＃34;与图像的位置相关。它始终适用于所有浏览器。

自己尝试小提琴。它没有太大的变化。

＆＃13;

jQuery(document).ready(function($) {

// Campange Slider
	$('.camp-slider').each(function () {
		

		
		$(this).prepend("<img class='full-image' style='width: "+ $(this).width() +"px; height: 300px;' src='" + 	$(this).data("image") + "' alt='"+ $(this).data('title') +"' />");

		$(this).append("<div class='alpha' style='background-image: url(\"" + $(this).data("alpha-image") + "\")'></div>");
		$(".alpha", this).width($(".full-image", this).width());
		$(".alpha", this).height($(".full-image", this).height());
		

		$("p", this).css("display", "block");
		$("h2", this).css("display", "block");
		$("h2", this).css("height", "40px");
		$("h2", this).css("float", "right");
		$("p", this).css("float", "right");
		$("h2", this).css("float", "right");
		$("p", this).width(($(".full-image", this).width()/100) * 75);
		$("h2", this).width(($(".full-image", this).width()/100) * 75);
		
		
		
		$("p", this).css("margin-top", "-"+  ($(".full-image", this).height()-$("h2", this).height()-10) +"px");
		$("h2", this).css("margin-top", "-" + ($(".full-image", this).height()-10) + "px");
		$(".alpha", this).css("margin-top", "-" + $(".full-image", this).height() + "px");
		
		$(this).append("<a class='moreBtn' style='clear: both;' href='" + $(this).data("readmore") + "'> Mehr zum Thema <a/>");
		
		
		//$(".full-image", this).css("margin-top", "-300px");
		//$(".full-image", this).css("position", "absolute");

		//$(this).prepend("<h2>" + $(this).data("title") + "</h2>");
	
	});
			
	$('.camp-slider').mouseenter(function(){
		
		$(".full-image", this).animate({
			left: "-75%"
		  }, 1000, function() {
			  
		  });
	});
	
		$('.camp-slider').mouseleave(function(){
		$(".full-image", this).animate({
			left: "0px"
		  }, 1000, function() {

		  });
	});

});

＆＃13;

.camp-slider {
	overflow: hidden;
}

.camp-slider p {
	color: #000;
	line-height: 25px;
	font-weight: bold;
	font-size: 14px;
	padding-top: 20px;
}


.camp-slider .moreBtn {
	display: block;
	width: 155px;
	background-color: #43679a;
	color: #FFF;
	text-align: right;
	padding-right: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-decoration: none;
	margin-top: -40px;
	float: right;
	font-weight: bold;
}

.full-image{
    position:relative;
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="camp-slider" data-readmore="http://www.karl-uwe-strothmann.de/kompetent-und-engagiert-fuer-die-jugend/" data-alpha-image="http://www.karl-uwe-strothmann.de/wp-content/themes/politicize/images/camp/a-alpha.png" data-image="http://www.karl-uwe-strothmann.de/wp-content/themes/politicize/images/camp/a-full.png" data-title="">
<h2>Kompetent und engagiert für die Jugend</h2>
<p>Die Jugend ist unsere Zukunft. Wir haben die Verpflichtung, Rahmenbedingungen zu schaffen, die den jungen Menschen in unserer Stadt bestmögliche Entwicklungschancen bieten. Ich wünsche mir allerdings auch, dass sich die Kinder und Jugendlichen in unserer Stadt wohlfühlen und sich mit ihr identifizieren</p>
</div>

＆＃13;

Answer 2

当你的文本元素没有消极margin-top时，可以更清楚地看到发生了什么。然后文本元素位于图像下方，因为图像占用空间，文本为float:right。

图像动画后直到margin-left: -70%;突然有足够的空间让文字显示在图像旁边，因此它会跳起来。

我认为解决问题的最佳方法是对图像和文本元素使用position:absolute。

Answer 3

将<h2>和<p>标记放入<div>，class名称是您喜欢的名称。并为此类设置margin-top，而不是<h2>和<p>。解决了这个问题！

<div class="content">
<h2>Kompetent und engagiert für die Jugend</h2>
<p>Die Jugend ist unsere Zukunft. Wir haben die Verpflichtung, Rahmenbedingungen zu schaffen, die den jungen Menschen in unserer Stadt bestmögliche Entwicklungschancen bieten. Ich wünsche mir allerdings auch, dass sich die Kinder und Jugendlichen in unserer Stadt wohlfühlen und sich mit ihr identifizieren</p>
    <div>

的javascript：

$(".content", this).css("margin-top", "-" + ($(".full-image", this).height()-10) + "px");

JSFiddle

Answer 4

你的问题是浮动和边距：当图像重叠时，浮动将使文本浮动在图像下方，被负边距绘制到顶部。将图像向左移动后，文本适合图像旁边，因此移动后边距应设置为0.

更好地实现您想要的方法是使用position:absolute和顶部/右侧值将文本与您希望的文本对齐。

在Firefox中的jQuery.animate之后文本消失了

4 个答案: