需要使用动画旋转div [英] Need rotate div using animation

问题描述

你好



我需要用动画显示标题。实际上我有两个标题（标题和广告）。如果用户点击屏幕中的任何位置它会删除现有的标题（示例标题）并显示另一个标题（advisement标题）与rotation.can你请告诉我该怎么做。

Hello

I need to show header with animation .Actually i have two header (header and advertisement ).If user click any where in screen it remove the existing header(example header) and show the another header(advisement header) with rotation.can you please tell me how to do that.

toggleHeaderBar : function() {
		console.log("toggleHeaderBar clicked");
		if ($('#headerRegion').offset().top != 0) {
			$('#headerRegion').css({
				"top" : "0px",
			//	"-webkit-transition" : "0.8s"
			});
			$('#advertisementRegion').css({
				"top" : "-300px",
				//"-webkit-transition" : "0.8s"
			});
			console.log("**************headerRegion***************");
			//*****************************Naveen*****************************
			//$('#advertisementRegion').css({"top" : "0px", "-webkit-transition":"rotateX(120deg)"});
			$('#bodyContentRegion').css({"top" : "55px", "-webkit-transition":"0.6s"});
		} else {
		console.log("**************advertisementRegion***************");
			$('#headerRegion').css({
				"top" : "-300px",
				//"-webkit-transition" : "4s"
			});
			$('#advertisementRegion').css({
				"top" : "0px",
				//"-webkit-transition" : "0.8s"
			});
			//$('#advertisementRegion').fadeIn(3000);
			//$('#advertisementRegion').css({"display":"block","top" : "0px", "-webkit-transition":"rotate(145deg)"});
			 $('#advertisementRegion').animate({
        'marginTop' : 180
    },{
        duration:750,
        step: function(now, fx) {
            $('#advertisementRegion').css('transform','rotate(' + 60 + 'deg)');
        }
    });
			$('#advertisementRegion').delay(300).animate({rotate: '80deg'}, 500);
			//$('#bodyContentRegion').css({"top" : "0px", "-webkit-transition":"0.6s"});
 //****************************************Naveen
		}

	},

推荐答案

（' ＃headerRegion'）。offset（）。top！= 0 ）{

('#headerRegion').offset().top != 0) {

（' ＃headerRegion'）。css（{
top： 0px，
// -webkit-transition：0.8s
}）;

('#headerRegion').css({ "top" : "0px", // "-webkit-transition" : "0.8s" });

（' ＃advertisementRegio n'）。css（{
top： - 300px，
// - webkit-transition：0.8s
}）;
console .log（ *** *********** headerRegion ***************）;
// ******************** ********* Naveen *****************************
//

('#advertisementRegion').css({ "top" : "-300px", //"-webkit-transition" : "0.8s" }); console.log("**************headerRegion***************"); //*****************************Naveen***************************** //

这篇关于需要使用动画旋转div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！